@yorab/react-paint 0.7.6 → 0.8.0

package/dist/types/Shapes.d.ts

@@ -0,0 +1,112 @@
+import { ShapeTypeArray } from '../constants/shapes';
+export type ShapeType = typeof ShapeTypeArray[number];
+export type Point = [number, number];
+export type StyledShape = {
+    visible?: boolean;
+    locked?: boolean;
+    style?: {
+        fillColor?: string;
+        globalAlpha?: number;
+        strokeColor?: string;
+        lineWidth?: number;
+        lineDash?: number;
+        lineArrow?: number;
+        pointsCount?: number;
+        fontFamily?: string;
+        fontItalic?: boolean;
+        fontBold?: boolean;
+    };
+};
+type Drawable = {
+    id: string;
+    toolId?: string;
+    rotation: number;
+};
+export type Rect = StyledShape & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type Square = Rect;
+export type StoredPicture = Rect & {
+    src: string;
+};
+export type Picture = StoredPicture & {
+    img: HTMLImageElement;
+};
+export type Text = Rect & {
+    value: string[];
+    fontSize: number;
+};
+export type Line = StyledShape & {
+    points: [Point, Point];
+};
+export type Triangle = StyledShape & {
+    points: [Point, Point, Point];
+};
+export type Polygon = StyledShape & {
+    points: Point[];
+};
+export type Curve = StyledShape & {
+    points: Point[];
+};
+export type Brush = StyledShape & {
+    points: Point[][];
+};
+export type Circle = StyledShape & {
+    x: number;
+    y: number;
+    radius: number;
+};
+export type Ellipse = StyledShape & {
+    x: number;
+    y: number;
+    radiusX: number;
+    radiusY: number;
+};
+export type DrawableRect = Rect & Drawable & {
+    type: 'rect';
+};
+export type DrawableSquare = Square & Drawable & {
+    type: 'square';
+};
+export type DrawablePictureJson = StoredPicture & Drawable & {
+    type: 'picture';
+};
+export type DrawablePicture = Picture & Drawable & {
+    type: 'picture';
+};
+export type DrawableText = Text & Drawable & {
+    type: 'text';
+};
+export type DrawableLine = Line & Drawable & {
+    type: 'line';
+};
+export type DrawablePolygon = Polygon & Drawable & {
+    type: 'polygon';
+};
+export type DrawableCurve = Curve & Drawable & {
+    type: 'curve';
+};
+export type DrawableBrush = Brush & Drawable & {
+    type: 'brush';
+};
+export type DrawableCircle = Circle & Drawable & {
+    type: 'circle';
+};
+export type DrawableEllipse = Ellipse & Drawable & {
+    type: 'ellipse';
+};
+export type DrawableShape = DrawableRect | DrawableSquare | DrawablePicture | DrawableText | DrawableLine | DrawablePolygon | DrawableCurve | DrawableBrush | DrawableCircle | DrawableEllipse;
+export type DrawableShapeJson = {
+    translation?: Point;
+} & (DrawableRect | DrawableSquare | DrawablePictureJson | DrawableText | DrawableLine | DrawableCurve | DrawablePolygon | DrawableBrush | DrawableCircle | DrawableEllipse);
+export type ExportDataType = {
+    shapes: DrawableShapeJson[];
+    config?: {
+        width: number;
+        height: number;
+    };
+};
+export {};

package/dist/types/snackbar.d.ts

@@ -0,0 +1,7 @@
+export type SnackbarTypeType = 'infos' | 'error' | 'success';
+export type SnackBarType = {
+    id: string;
+    type: SnackbarTypeType;
+    text: string;
+    duration: number;
+};

package/dist/types/tools.d.ts

@@ -0,0 +1,124 @@
+import type { ShapeType } from './Shapes';
+export type CustomToolInput = {
+    id: string;
+    type: ShapeType;
+    icon?: string;
+    label?: string;
+    settings?: ToolsSettingsType<ShapeType>;
+};
+export type CustomTool = {
+    id: string;
+    icon: string;
+    label: string;
+} & ({
+    type: 'brush';
+    settings: ToolsSettingsType<'brush'>;
+} | {
+    type: 'circle';
+    settings: ToolsSettingsType<'circle'>;
+} | {
+    type: 'ellipse';
+    settings: ToolsSettingsType<'ellipse'>;
+} | {
+    type: 'rect';
+    settings: ToolsSettingsType<'rect'>;
+} | {
+    type: 'square';
+    settings: ToolsSettingsType<'square'>;
+} | {
+    type: 'line';
+    settings: ToolsSettingsType<'line'>;
+} | {
+    type: 'polygon';
+    settings: ToolsSettingsType<'polygon'>;
+} | {
+    type: 'curve';
+    settings: ToolsSettingsType<'curve'>;
+} | {
+    type: 'text';
+    settings: ToolsSettingsType<'text'>;
+} | {
+    type: 'picture';
+    settings: ToolsSettingsType<'picture'>;
+});
+export type SettingsOpacity = {
+    opacity: {
+        min: number;
+        max: number;
+        step: number;
+        default: number;
+    };
+};
+export type SettingsStrokeColor = {
+    strokeColor: {
+        values: string[];
+        default: string;
+    };
+};
+export type SettingsFillColor = {
+    fillColor: {
+        values: string[];
+        default: string;
+    };
+};
+export type SettingsLineWidth = {
+    lineWidth: {
+        min: number;
+        max: number;
+        step: number;
+        default: number;
+    };
+};
+export type SettingsLineDash = {
+    lineDash: {
+        values: number[];
+        default: number;
+    };
+};
+export type SettingsLineArrow = {
+    lineArrow: {
+        values: number[];
+        default: number;
+    };
+};
+export type SettingsFont = {
+    fontFamily: {
+        values: string[];
+        default: string;
+    };
+    fontBold: {
+        values: boolean[];
+        default: boolean;
+    };
+    fontItalic: {
+        values: boolean[];
+        default: boolean;
+    };
+};
+export type SettingsPointsCount = {
+    pointsCount: {
+        min: number;
+        max: number;
+        step: number;
+        default: number;
+    };
+};
+export type ToolsRectSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash;
+export type ToolsSquareSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash;
+export type ToolsCircleSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash;
+export type ToolsEllipseSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash;
+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 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 'picture' ? ToolsPictureSettings : unknown;
+export type ActionsType = 'selection' | 'undo' | 'redo' | 'clear' | 'export' | 'loadfile' | 'savefile' | 'move' | 'uploadpicture' | 'addurlpicture';
+export type ActionsTool = {
+    id: string;
+    type: ActionsType;
+    icon: string;
+    label: string;
+};
+export type ToolsType = CustomTool | ActionsTool;

package/dist/types/utils.d.ts

@@ -0,0 +1,3 @@
+export type RecursivePartial<T> = {
+    [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object ? RecursivePartial<T[P]> : T[P];
+};

package/dist/utils/canvas.d.ts

@@ -0,0 +1,10 @@
+import type { Point } from '../types/Shapes';
+export declare const initCanvasContext: (ctx: CanvasRenderingContext2D) => void;
+export declare const updateCanvasContext: (ctx: CanvasRenderingContext2D, style?: {
+    fillColor?: string;
+    globalAlpha?: number;
+    strokeColor?: string;
+    lineWidth?: number;
+    lineDash?: number;
+}) => void;
+export declare const transformCanvas: (ctx: CanvasRenderingContext2D, responsiveScale: number, canvasOffset: Point, rotation: number, translation: Point) => void;

package/dist/utils/data.d.ts

@@ -0,0 +1,225 @@
+import type { DrawableShape, DrawableShapeJson, ExportDataType } from '../types/Shapes';
+export declare const cleanShapesBeforeExport: (shapes: DrawableShape[]) => DrawableShapeJson[];
+export declare const buildDataToExport: (shapes: DrawableShape[], width: number, height: number) => ExportDataType;
+export declare const addDefaultAndTempShapeProps: (shape: DrawableShape) => {
+    id: string;
+    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;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    toolId?: string | undefined;
+    rotation: number;
+    type: "rect";
+} | {
+    id: string;
+    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;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    toolId?: string | undefined;
+    rotation: number;
+    type: "square";
+} | {
+    id: string;
+    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;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    src: string;
+    img: HTMLImageElement;
+    toolId?: string | undefined;
+    rotation: number;
+    type: "picture";
+} | {
+    id: string;
+    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;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    value: string[];
+    fontSize: number;
+    toolId?: string | undefined;
+    rotation: number;
+    type: "text";
+} | {
+    id: string;
+    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;
+    points: [import("../types/Shapes").Point, import("../types/Shapes").Point];
+    toolId?: string | undefined;
+    rotation: number;
+    type: "line";
+} | {
+    id: string;
+    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;
+    points: import("../types/Shapes").Point[];
+    toolId?: string | undefined;
+    rotation: number;
+    type: "polygon";
+} | {
+    id: string;
+    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;
+    points: import("../types/Shapes").Point[];
+    toolId?: string | undefined;
+    rotation: number;
+    type: "curve";
+} | {
+    id: string;
+    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;
+    points: import("../types/Shapes").Point[][];
+    toolId?: string | undefined;
+    rotation: number;
+    type: "brush";
+} | {
+    id: string;
+    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;
+    x: number;
+    y: number;
+    radius: number;
+    toolId?: string | undefined;
+    rotation: number;
+    type: "circle";
+} | {
+    id: string;
+    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;
+    x: number;
+    y: number;
+    radiusX: number;
+    radiusY: number;
+    toolId?: string | undefined;
+    rotation: number;
+    type: "ellipse";
+};

package/dist/utils/dom.d.ts

@@ -0,0 +1 @@
+export declare const isEventInsideNode: (event: MouseEvent | TouchEvent, node: HTMLElement | null) => boolean;

package/dist/utils/file.d.ts

@@ -0,0 +1,10 @@
+import type { DrawableShape, ExportDataType, Point } from '../types/Shapes';
+export declare const addSizeAndConvertSvgToObjectUrl: (svgFileContent: string) => string;
+export declare const isSvg: (fileOrUrl: File | string) => boolean;
+export declare const fetchAndStringify: (url: string) => Promise<string>;
+export declare const downloadFile: (content: string, fileName: string) => void;
+export declare const getBase64Image: (img: HTMLImageElement) => string;
+export declare const getCanvasImage: (shapes: DrawableShape[], canvasOffset: Point, width: number, height: number, selectionPadding: number) => string;
+export declare const encodeShapesInString: (shapes: DrawableShape[], width: number, height: number) => string;
+export declare const decodeJson: (file: File) => Promise<unknown>;
+export declare const decodeImportedData: (shapesForJson: ExportDataType) => Promise<DrawableShape[]>;

package/dist/utils/intersect.d.ts

@@ -0,0 +1,6 @@
+import type { HoverModeData } from '../types/Mode';
+import type { Point, DrawableShape } from '../types/Shapes';
+export declare const getCursorPosition: (e: MouseEvent | TouchEvent, canvas: HTMLCanvasElement | null, givenWidth: number, givenHeight: number, scaleRatio?: number) => Point;
+export declare const getPointPositionAfterCanvasTransformation: (point: Point, shapeRotation: number, [originX, originY]: Point, [canvasOffsetX, canvasOffsetY]: Point) => Point;
+export declare const getPointPositionBeforeCanvasTransformation: (point: Point, shapeRotation: number, [originX, originY]: Point, [canvasOffsetX, canvasOffsetY]: Point) => Point;
+export declare const checkPositionIntersection: (shape: DrawableShape, position: Point, canvasOffset: Point, selectionPadding: number, currentScale?: number, checkAnchors?: boolean) => false | HoverModeData;

package/dist/utils/migration.d.ts

@@ -0,0 +1,165 @@
+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;
+    rotation: number;
+} & {
+    type: "rect";
+}) | ({
+    translation?: Point | undefined;
+} & import("../types/Shapes").StyledShape & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} & {
+    id: string;
+    toolId?: string | undefined;
+    rotation: number;
+} & {
+    type: "square";
+}) | ({
+    translation?: Point | undefined;
+} & import("../types/Shapes").StyledShape & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} & {
+    src: string;
+} & {
+    id: string;
+    toolId?: string | undefined;
+    rotation: number;
+} & {
+    type: "picture";
+}) | ({
+    translation?: Point | undefined;
+} & import("../types/Shapes").StyledShape & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} & {
+    value: string[];
+    fontSize: number;
+} & {
+    id: string;
+    toolId?: string | undefined;
+    rotation: number;
+} & {
+    type: "text";
+}) | ({
+    translation?: Point | undefined;
+} & import("../types/Shapes").StyledShape & {
+    points: [Point, Point];
+} & {
+    id: string;
+    toolId?: string | undefined;
+    rotation: number;
+} & {
+    type: "line";
+}) | ({
+    translation?: Point | undefined;
+} & import("../types/Shapes").StyledShape & {
+    points: Point[];
+} & {
+    id: string;
+    toolId?: string | undefined;
+    rotation: number;
+} & {
+    type: "polygon";
+}) | ({
+    translation?: Point | undefined;
+} & import("../types/Shapes").StyledShape & {
+    points: Point[];
+} & {
+    id: string;
+    toolId?: string | undefined;
+    rotation: number;
+} & {
+    type: "curve";
+}) | ({
+    translation?: Point | undefined;
+} & import("../types/Shapes").StyledShape & {
+    points: Point[][];
+} & {
+    id: string;
+    toolId?: string | undefined;
+    rotation: number;
+} & {
+    type: "brush";
+}) | ({
+    translation?: Point | undefined;
+} & import("../types/Shapes").StyledShape & {
+    x: number;
+    y: number;
+    radius: number;
+} & {
+    id: string;
+    toolId?: string | undefined;
+    rotation: number;
+} & {
+    type: "circle";
+}) | ({
+    translation?: Point | undefined;
+} & import("../types/Shapes").StyledShape & {
+    x: number;
+    y: number;
+    radiusX: number;
+    radiusY: number;
+} & {
+    id: string;
+    toolId?: string | undefined;
+    rotation: number;
+} & {
+    type: "ellipse";
+}) | {
+    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;
+    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;
+    type: "polygon" | "curve";
+    rotation: number;
+    toolId?: string | undefined;
+    id: string;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+} | undefined)[];

package/dist/utils/selection.d.ts

@@ -0,0 +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) => {
+    mode: SelectionModeData<Point | number>;
+    shape: DrawableShape | undefined;
+};