@yorab/react-paint 0.18.1 → 1.0.0-beta.1

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

@@ -0,0 +1,45 @@
+import type { PictureSrcResolver, UtilsSettings } from './../../canvas/constants/app.js';
+import type { EditableShapeType, ShapeEntity, ShapeInput } from './../../canvas/types/Shapes.js';
+import type { CustomTool } from './../../canvas/types/tools.js';
+export declare const isEditableShapeType: (type: unknown) => type is EditableShapeType;
+/** Checks that a shape, or a patch, only has the fields of its type */
+export declare const getUnknownFieldError: (shape: Record<string, unknown>, type: EditableShapeType) => string | undefined;
+/** Checks the types of the common fields given to create or update a shape */
+export declare const getCommonFieldsError: (shape: Record<string, unknown>) => string | undefined;
+/** Checks the geometry of a shape of the type: other fields are not read */
+export declare const getGeometryError: (shape: Record<string, unknown>, type: EditableShapeType) => string | undefined;
+/**
+ * Checks a shape given to create or update a shape: its type, the fields allowed for this type and its geometry.
+ * Returns the error message, or undefined when the shape is valid.
+ */
+export declare const getShapeInputError: (shape: unknown) => string | undefined;
+/** Throws an error naming the faulty shape when one of them is invalid */
+export declare const assertValidShapes: (shapes: unknown[], action: string) => void;
+type BuildShapeOptions = {
+    ctx: CanvasRenderingContext2D;
+    settings: UtilsSettings;
+    tools: CustomTool[];
+    /** Ids already taken: an id given with the shape is kept when it is free. The id of the new shape is added to it */
+    usedIds: Set<string>;
+    /** Completes the style with the default style of the tool of the shape. Loaded shapes keep their own style */
+    completeStyle: boolean;
+};
+/** Builds the entity of a shape given by the consumer. The image of a picture is created empty: see loadPicture */
+export declare const buildShapeEntity: (input: ShapeInput, { ctx, settings, tools, usedIds, completeStyle }: BuildShapeOptions) => ShapeEntity;
+type DecodeOptions = Omit<BuildShapeOptions, 'completeStyle'> & {
+    resolvePictureSrc: PictureSrcResolver | undefined;
+};
+/** A picture of loaded data whose image cannot be loaded, and the reason */
+type FailedPicture = {
+    shape: ShapeEntity<'picture'>;
+    error: unknown;
+};
+/**
+ * Builds the shapes of loaded data and waits for their pictures. The shapes of an unknown type are left out, like the
+ * pictures which cannot be loaded, with a warning: these pictures are returned apart. The others keep their style.
+ */
+export declare const decodeImportedData: (inputs: ShapeInput[], { resolvePictureSrc, ...options }: DecodeOptions) => Promise<{
+    shapes: ShapeEntity[];
+    failedPictures: FailedPicture[];
+}>;
+export {};

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

@@ -0,0 +1,10 @@
+import type { UtilsSettings } from './../../canvas/constants/app.js';
+import type { ShapeEntity, ShapePatch } from './../../canvas/types/Shapes.js';
+/** Throws an error naming the faulty patch when one of them is invalid. The patches of unknown shapes are ignored */
+export declare const assertValidPatches: (patches: unknown[], shapesById: ReadonlyMap<string, ShapeEntity>) => void;
+/**
+ * Applies a patch to a shape: its fields replace the current ones, except the style which is merged. A square keeps
+ * equal sides. The box of a text follows its new content or font size; its font size follows a new width or font,
+ * like in the editor. The image of a picture whose source changes is reloaded by the caller.
+ */
+export declare const applyShapePatch: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, patch: ShapePatch, settings: UtilsSettings) => ShapeEntity;

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

@@ -1,12 +1,12 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
-import type { ToolsSettingsType } from './../../../common/types/tools';
-import { type GroupResizeContext } from './group';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { SelectionModeResize } from './../../../canvas/types/Mode.js';
+import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity } from './../../../canvas/types/Shapes.js';
+import type { ToolsSettingsType } from './../../../canvas/types/tools.js';
+import { type GroupResizeContext } from './group.js';
 export declare const getBrushBorder: (brush: DrawableShape<"brush">, { selectionPadding }: Pick<UtilsSettings, "selectionPadding">) => Rect;
 export declare const refreshBrush: <T extends DrawableShape<"brush">>(brush: T & {
     id: string;
-}, settings: UtilsSettings) => ShapeEntity<"brush">;
+}, settings: UtilsSettings, path?: Path2D) => ShapeEntity<"brush">;
 export declare const createBrush: (shape: {
     id: string;
     type: "brush";

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

@@ -1,8 +1,8 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Point, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
-import type { ToolsSettingsType } from './../../../common/types/tools';
-import { type GroupResizeContext } from './group';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { SelectionModeResize } from './../../../canvas/types/Mode.js';
+import type { DrawableShape, Point, SelectionType, ShapeEntity } from './../../../canvas/types/Shapes.js';
+import type { ToolsSettingsType } from './../../../canvas/types/tools.js';
+import { type GroupResizeContext } from './group.js';
 export declare const refreshCircle: <T extends DrawableShape<"circle">>(shape: T & {
     id: string;
 }, settings: UtilsSettings) => ShapeEntity<"circle">;

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

@@ -1,7 +1,7 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Point, ShapeEntity } from './../../../common/types/Shapes';
-import type { ToolsSettingsType } from './../../../common/types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { SelectionModeResize } from './../../../canvas/types/Mode.js';
+import type { DrawableShape, Point, ShapeEntity } from './../../../canvas/types/Shapes.js';
+import type { ToolsSettingsType } from './../../../canvas/types/tools.js';
 export declare const refreshCurve: <T extends DrawableShape<"curve">>(shape: T & {
     id: string;
 }, settings: UtilsSettings) => ShapeEntity<"curve">;

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

@@ -1,8 +1,8 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Point, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
-import type { ToolsSettingsType } from './../../../common/types/tools';
-import { type GroupResizeContext } from './group';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { SelectionModeResize } from './../../../canvas/types/Mode.js';
+import type { DrawableShape, Point, SelectionType, ShapeEntity } from './../../../canvas/types/Shapes.js';
+import type { ToolsSettingsType } from './../../../canvas/types/tools.js';
+import { type GroupResizeContext } from './group.js';
 export declare const refreshEllipse: <T extends DrawableShape<"ellipse">>(shape: T & {
     id: string;
 }, settings: UtilsSettings) => ShapeEntity<"ellipse">;

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

@@ -1,6 +1,6 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { Point, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { SelectionModeResize } from './../../../canvas/types/Mode.js';
+import type { Point, Rect, SelectionType, ShapeEntity } from './../../../canvas/types/Shapes.js';
 /** Shared context when resizing shapes inside a group */
 export type GroupResizeContext = {
     newBorderX: number;
@@ -21,6 +21,12 @@ export type GroupResizeContext = {
         height: number;
     };
 };
+/** Context to resize the shapes of a group (or a single shape) so that the borders of the group become the new ones */
+export declare const buildGroupResizeContext: (group: SelectionType, newBorders: Rect, settings: UtilsSettings, { isXinverted, isYinverted, rotation }?: {
+    isXinverted?: boolean;
+    isYinverted?: boolean;
+    rotation?: number;
+}) => GroupResizeContext;
 export declare const getGroupResizeContext: (cursorPosition: Point, group: SelectionType & {
     type: "group";
 }, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio: boolean, isAltPressed: boolean) => GroupResizeContext;

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

@@ -1,19 +1,43 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { HoverModeData, SelectionModeData, SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
-import type { CustomTool } from './../../../common/types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { HoverModeData, SelectionModeData, SelectionModeResize } from './../../../canvas/types/Mode.js';
+import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity, StyleShape } from './../../../canvas/types/Shapes.js';
+import type { CustomTool } from './../../../canvas/types/tools.js';
+import { type GroupResizeContext } from './group.js';
 export declare const createShape: (ctx: CanvasRenderingContext2D, shape: Exclude<CustomTool, {
     type: "picture";
 }>, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity | undefined;
 export declare const drawShape: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, settings: UtilsSettings, currentView?: Rect) => void;
 export declare const rotateShape: <T extends ShapeEntity>(shape: T, rotationToApply: number, selectionCenter: Point) => T;
 export declare const resizeShape: <T extends ShapeEntity>(ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: T, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean, isAltPressed: boolean) => T;
+/**
+ * Whether shapes resized together keep their proportions: a group with a shape keeping its ratio, or with shapes
+ * turned differently, cannot be stretched
+ */
+export declare const mustKeepRatio: (shapes: ShapeEntity[]) => boolean;
+/** Resizes a shape of a group (or a single shape) to the new borders of the group described by the context */
+export declare const resizeShapeInGroup: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, group: SelectionType, groupCtx: GroupResizeContext) => ShapeEntity;
 export declare const resizeShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: SelectionType, selectionMode: SelectionModeResize<Point | number>, settings: UtilsSettings, isShiftPressed: boolean, isAltPressed: boolean) => ShapeEntity[];
-export declare const flipShapes: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], selectedShapes: ShapeEntity[], center: Point, action: "flipHorizontally" | "flipVertically", settings: UtilsSettings) => ShapeEntity[];
+/** Content box of a selection: its borders without the padding of the selection */
+export declare const getSelectionBounds: (selection: SelectionType, settings: UtilsSettings) => Rect;
+/**
+ * Resizes shapes so that the content box of their selection becomes the given box. When they must keep their
+ * proportions, the box is reduced to keep them, from its top left corner
+ */
+export declare const resizeShapesToBounds: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], bounds: Rect, settings: UtilsSettings) => ShapeEntity[];
+/** Flips shapes around the center of their group */
+export declare const flipShapes: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], action: "flipHorizontally" | "flipVertically", settings: UtilsSettings) => ShapeEntity[];
+export declare const translateShape: (shape: ShapeEntity, translationX: number, translationY: number, settings: UtilsSettings) => ShapeEntity;
 export declare const translateShapes: (cursorPosition: Point, originalShape: SelectionType, originalCursorPosition: Point, settings: UtilsSettings, isShiftPressed: boolean) => ShapeEntity[];
 export declare const refreshShape: (shape: DrawableShape & {
     id: string;
 }, settings: UtilsSettings) => ShapeEntity;
+/** A point can only be removed from a polygon or a curve keeping at least 2 points */
+export declare const canRemoveShapePoint: (shape: ShapeEntity | undefined, pointIndex: number | undefined) => shape is ShapeEntity<"polygon"> | ShapeEntity<"curve">;
+/**
+ * Returns the shape with the new style values. Font fields only apply to texts, whose font size is fitted
+ * to their width: a shape is returned unchanged when no field applies to it.
+ */
+export declare const updateShapeStyle: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, style: StyleShape, settings: UtilsSettings) => ShapeEntity;
 export declare const drawShapeSelection: ({ ctx, shape, settings, selectionWidth, selectionColor, hoverMode, selectionMode, withAnchors }: {
     ctx: CanvasRenderingContext2D;
     shape: SelectionType;
@@ -32,4 +56,6 @@ export declare const drawSelectionFrame: ({ ctx, selectionFrame, settings }: {
     };
     settings: UtilsSettings;
 }) => void;
+/** Copy of a shape with a new id. The copy does not share the data of the application with the original */
+export declare const cloneShape: <T extends ShapeEntity>(shape: T) => T;
 export declare const copyShapes: (groupShape: SelectionType, settings: UtilsSettings) => ShapeEntity[];

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

@@ -1,8 +1,8 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Point, SelectionType, ShapeEntity, StyleShape, Triangle } from './../../../common/types/Shapes';
-import type { ToolsSettingsType } from './../../../common/types/tools';
-import { type GroupResizeContext } from './group';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { SelectionModeResize } from './../../../canvas/types/Mode.js';
+import type { DrawableShape, Point, SelectionType, ShapeEntity, StyleShape, Triangle } from './../../../canvas/types/Shapes.js';
+import type { ToolsSettingsType } from './../../../canvas/types/tools.js';
+import { type GroupResizeContext } from './group.js';
 export declare const refreshLine: <T extends DrawableShape<"line">>(line: T & {
     id: string;
 }, settings: UtilsSettings) => ShapeEntity<"line">;

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

@@ -1,17 +1,25 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { Circle, DrawableShape, Line, Point, Rect } from './../../../common/types/Shapes';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { Circle, DrawableShape, Line, Point, Rect, ShapeEntity } from './../../../canvas/types/Shapes.js';
+import { type Bounds } from './../../../canvas/utils/trigo.js';
 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;
+/** Bounds of the points of a brush, without its scale */
+export declare const getBrushPointsBounds: (points: Point[][]) => Bounds;
+/** The points of a brush with a new point at the end of a stroke, or in a new stroke when the index is the number of strokes */
+export declare const addBrushPoint: (points: Point[][], strokeIndex: number, point: Point) => Point[][];
+/** Places the points of a brush as they are drawn: scaled from the top left corner of the brush */
+export declare const getBrushPointScaler: (brush: DrawableShape<"brush">) => ((point: Point) => Point);
+/**
+ * The path of the brush with a new point at the end of its last stroke, extended instead of built again from all
+ * the points. Undefined when it must be built again: a single point is drawn as a square, and the end of a smoothed
+ * stroke changes with each point
+ */
+export declare const extendBrushPath: (brush: ShapeEntity<"brush">, point: Point, { brushAlgo }: UtilsSettings) => Path2D | undefined;
 export declare const createBrushPath: (brush: DrawableShape<"brush">, { brushAlgo }: UtilsSettings) => Path2D;
 /** Bounding box of a cubic Bezier segment B(t) = (1-t)³P0 + 3(1-t)²t P1 + 3(1-t)t² P2 + t³ P3 */
-export declare const getCubicBezierBounds: (p0: Point, p1: Point, p2: Point, p3: Point) => {
-    minX: number;
-    maxX: number;
-    minY: number;
-    maxY: number;
-};
+export declare const getCubicBezierBounds: (p0: Point, p1: Point, p2: Point, p3: Point) => Bounds;
 export declare const getCatmullRomPoints: (curve: DrawableShape<"curve">, points: Point[]) => Point[];
 export declare const catmullRomToBezier: (p0: Point, p1: Point, p2: Point, p3: Point) => {
     cp1: Point;

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

@@ -1,11 +1,13 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Point, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
-import { type GroupResizeContext } from './group';
+import type { PictureSrcResolver, UtilsSettings } from './../../../canvas/constants/app.js';
+import type { SelectionModeResize } from './../../../canvas/types/Mode.js';
+import type { DrawableShape, Point, SelectionType, ShapeEntity } from './../../../canvas/types/Shapes.js';
+import { type GroupResizeContext } from './group.js';
 export declare const refreshPicture: <T extends DrawableShape<"picture">>(shape: T & {
     id: string;
 }, settings: UtilsSettings) => ShapeEntity<"picture">;
-export declare const createPicture: (fileOrUrl: File | string, maxPictureWidth: number, maxPictureHeight: number, settings: UtilsSettings) => Promise<ShapeEntity<"picture">>;
+export declare const createPicture: (fileOrUrl: File | string, maxPictureWidth: number, maxPictureHeight: number, settings: UtilsSettings, resolvePictureSrc: PictureSrcResolver | undefined, 
+/** Center of the picture in the drawing, the center of the visible area by default */
+center?: Point) => Promise<ShapeEntity<"picture">>;
 export declare const drawPicture: (ctx: CanvasRenderingContext2D, picture: ShapeEntity<"picture">) => void;
 export declare const resizePicture: (cursorPosition: Point, originalShape: ShapeEntity<"picture">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => ShapeEntity<"picture">;
 export declare const resizePictureInGroup: (shape: ShapeEntity<"picture">, group: SelectionType & {

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

@@ -1,7 +1,7 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Point, Polygon, Rect, ShapeEntity } from './../../../common/types/Shapes';
-import type { ToolsSettingsType } from './../../../common/types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { SelectionModeResize } from './../../../canvas/types/Mode.js';
+import type { DrawableShape, Point, Polygon, Rect, ShapeEntity } from './../../../canvas/types/Shapes.js';
+import type { ToolsSettingsType } from './../../../canvas/types/tools.js';
 export declare const refreshPolygon: <T extends DrawableShape<"polygon">>(shape: T & {
     id: string;
 }, settings: UtilsSettings) => ShapeEntity<"polygon">;

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

@@ -1,8 +1,8 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
-import type { ToolsSettingsType } from './../../../common/types/tools';
-import { type GroupResizeContext } from './group';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { SelectionModeResize } from './../../../canvas/types/Mode.js';
+import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity } from './../../../canvas/types/Shapes.js';
+import type { ToolsSettingsType } from './../../../canvas/types/tools.js';
+import { type GroupResizeContext } from './group.js';
 type rectish = 'rect' | 'square';
 export declare const refreshRect: <T extends rectish>(rect: DrawableShape<rectish> & {
     id: string;

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

@@ -1,8 +1,8 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity, Text } from './../../../common/types/Shapes';
-import type { ToolsSettingsType } from './../../../common/types/tools';
-import { type GroupResizeContext } from './group';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { SelectionModeResize } from './../../../canvas/types/Mode.js';
+import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity, StyleShape, Text, TextShapeInput } from './../../../canvas/types/Shapes.js';
+import type { ToolsSettingsType } from './../../../canvas/types/tools.js';
+import { type GroupResizeContext } from './group.js';
 export declare const getComputedText: (text: DrawableShape<"text">, settings: UtilsSettings) => {
     borders: Rect;
     outerBorders: Rect;
@@ -12,7 +12,13 @@ export declare const getComputedText: (text: DrawableShape<"text">, settings: Ut
 export declare const refreshText: <T extends DrawableShape<"text">>(shape: T & {
     id: string;
 }, settings: UtilsSettings) => ShapeEntity<"text">;
-export declare const calculateTextFontSize: (ctx: CanvasRenderingContext2D, text: string[], maxWidth: number, fontBold: boolean, fontItalic: boolean, fontFamily?: string | undefined) => number;
+/** A text without lines, emptied in the edition box, keeps the height of one */
+export declare const getTextLineCount: (value: string[]) => number;
+export declare const calculateTextFontSize: (ctx: CanvasRenderingContext2D, text: string[], maxWidth: number, fontBold: boolean, fontItalic: boolean, fontFamily?: string) => number;
+export declare const isFontStyleField: (field: keyof StyleShape) => boolean;
+export declare const fitTextFontSize: <T extends DrawableShape<"text">>(ctx: CanvasRenderingContext2D, text: T) => T;
+/** Completes the size of a text which misses it: from its width, from its font size, or else with the default font size */
+export declare const sizeText: <T extends TextShapeInput>(ctx: CanvasRenderingContext2D, text: T) => T & DrawableShape<"text">;
 export declare const createText: (ctx: CanvasRenderingContext2D, shape: {
     id: string;
     type: "text";

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

@@ -1,4 +1,4 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { Triangle, TriangleEntity } from './../../../common/types/Shapes';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { Triangle, TriangleEntity } from './../../../canvas/types/Shapes.js';
 export declare const createTriangle: (triangle: Triangle, settings: UtilsSettings) => TriangleEntity;
 export declare const drawTriangle: (ctx: CanvasRenderingContext2D, triangle: TriangleEntity) => void;

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

@@ -1,3 +1,12 @@
-import type { CustomTool, CustomToolInput } from './../../common/types/tools';
-import type { RecursivePartial } from './../../common/types/utils';
-export declare const sanitizeTools: (tools: RecursivePartial<CustomToolInput>[]) => CustomTool[];
+import type { DrawableShape, StyleShape } from './../../canvas/types/Shapes.js';
+import type { CustomTool, CustomToolInput } from './../../canvas/types/tools.js';
+import type { RecursivePartial } from './../../canvas/types/utils.js';
+/**
+ * Builds the tools list used by the canvas. Each partial tool is merged with the default tool of the same type,
+ * arrays (like color values) being replaced instead of merged. Without input, default tools are returned.
+ */
+export declare const buildAvailableTools: (tools: RecursivePartial<CustomToolInput>[] | undefined) => CustomTool[];
+/** The tool of a shape: the one it was drawn with, or else the first tool of its type */
+export declare const findShapeTool: (tools: CustomTool[], shape: Pick<DrawableShape, "toolId" | "type">) => CustomTool | undefined;
+/** Style made of the default values of the settings of a tool */
+export declare const getToolDefaultStyle: (tool: CustomTool | undefined) => StyleShape;

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

@@ -1,12 +1,13 @@
-import type { UtilsSettings } from './../../canvas/constants/app';
-import type { SelectionModeData } from './../../common/types/Mode';
-import type { DrawableShape, Line, Point, SelectionType } from './../../common/types/Shapes';
+import type { UtilsSettings } from './../../canvas/constants/app.js';
+import type { SelectionModeData } from './../../canvas/types/Mode.js';
+import type { DrawableShape, Line, Point, SelectionType, ShapeEntity } from './../../canvas/types/Shapes.js';
 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, isShiftPressed: boolean) => number;
 export declare const boundVectorToSingleAxis: (vector: Point, isShiftPressed: boolean) => Point;
-export declare const transformShape: (ctx: CanvasRenderingContext2D, selectedShape: SelectionType, cursorPosition: Point, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean, isAltPressed: boolean) => SelectionType;
+/** The selected shapes, transformed by the gesture: the selection is built again from them when they are updated */
+export declare const transformSelectedShapes: (ctx: CanvasRenderingContext2D, selectedShape: SelectionType, 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) => Point;
 export declare const shortenLine: ({ line, size, direction }: {
     line: DrawableShape<"line">;

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

@@ -1,8 +1,24 @@
-import type { Circle, Point, Rect } from './../../common/types/Shapes';
+import type { Circle, Point, Rect } from './../../canvas/types/Shapes.js';
 type Vector = [Point, Point];
 export declare const degreesToRadians: (degrees: number) => number;
 export declare const radiansToDegrees: (radians: number) => number;
 export declare const isPointInsideRect: (rect: Rect, point: Point) => boolean;
+export type Bounds = {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+};
+/**
+ * Bounds of the points of several lists, in a single pass. Spreading the points into Math.min would allocate arrays,
+ * and fail beyond the maximum number of arguments of a call, which a long brush stroke reaches. Without points, the
+ * bounds are infinite, as Math.min() and Math.max()
+ */
+export declare const getPointsBounds: (pointLists: readonly (readonly Point[])[]) => Bounds;
+/** The 4 corners of a rectangle, clockwise from its top left corner */
+export declare const getRectCorners: ({ x, y, width, height }: Rect) => Point[];
+/** Smallest rectangle containing the rectangles */
+export declare const getBoundingRect: (rects: Rect[]) => Rect;
 export declare const isCircleIntersectRect: (rect: Rect, circle: Circle) => boolean;
 export declare const rotatePoint: ({ origin, point, rotation }: {
     origin?: Point;

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

@@ -0,0 +1,14 @@
+export declare const uniqueId: (prefix?: string) => string;
+/**
+ * Id of a new shape. It is random, so that it does not collide with the ids of the shapes saved in another session:
+ * crypto.randomUUID only exists in secure contexts, otherwise the time, a random part and a counter are used.
+ */
+export declare const createShapeId: (type: string) => string;
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const isMacOs: () => boolean;
+/**
+ * Value of a style property that a CSS variable set on any parent element overrides, without !important.
+ * The canvas never sets these variables itself, otherwise it would hide the ones of the parents.
+ * Without fallback, the property falls back to its inherited or initial value when the variable is not set.
+ */
+export declare const cssVar: (name: `--${string}`, fallback?: string | number) => string;

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

@@ -1,18 +1,22 @@
-import type { UtilsSettings } from './../../canvas/constants/app';
-import type { CanvasSize, Size } from './../../common/types/Canvas';
-import type { Point, Rect } from './../../common/types/Shapes';
-export declare const getNewOffset: ({ size, zoom, newOffset: [x, y], canvasSize }: {
-    zoom: number;
+import type { UtilsSettings } from './../../canvas/constants/app.js';
+import type { CanvasSize, Size } from './../../canvas/types/Canvas.js';
+import type { Point, Rect } from './../../canvas/types/Shapes.js';
+/** Keeps a zoom level between the smallest and the largest zoom levels */
+export declare const clampZoom: (zoom: number) => number;
+/** Bounds of the view: the visible area at zoom 1 and the size of the drawing, which limits the view when its size is fixed */
+export type ViewBounds = {
     size: Size;
-    newOffset: Point;
     canvasSize: CanvasSize;
+    drawingSize: UtilsSettings['drawingSize'];
+};
+export declare const getNewOffset: ({ size, zoom, newOffset: [x, y], canvasSize, drawingSize }: ViewBounds & {
+    zoom: number;
+    newOffset: Point;
 }) => {
     zoom: number;
     offset: Point;
 };
-export declare const calculateNewZoomAndOffset: ({ size, canvasSize, currentOffset, currentZoom, zoom, centerPoint: iCenterPoint }: {
-    size: Size;
-    canvasSize: CanvasSize;
+export declare const calculateNewZoomAndOffset: ({ currentOffset, currentZoom, zoom, centerPoint, ...bounds }: ViewBounds & {
     currentOffset: Point;
     currentZoom: number;
     zoom: number;
@@ -21,9 +25,7 @@ export declare const calculateNewZoomAndOffset: ({ size, canvasSize, currentOffs
     offset: Point;
     zoom: number;
 };
-export declare const getNewZoomAndOffset: ({ size, canvasSize, currentOffset, currentZoom, action }: {
-    size: Size;
-    canvasSize: CanvasSize;
+export declare const getNewZoomAndOffset: ({ currentOffset, currentZoom, action, ...bounds }: ViewBounds & {
     currentOffset: Point;
     currentZoom: number;
     action: "unzoom" | "zoom" | "default";
@@ -31,9 +33,7 @@ export declare const getNewZoomAndOffset: ({ size, canvasSize, currentOffset, cu
     offset: Point;
     zoom: number;
 };
-export declare const getNewZoomAndOffsetFromDelta: ({ size, canvasSize, currentOffset, currentZoom, delta, centerPoint }: {
-    size: Size;
-    canvasSize: CanvasSize;
+export declare const getNewZoomAndOffsetFromDelta: ({ currentOffset, currentZoom, delta, centerPoint, ...bounds }: ViewBounds & {
     currentOffset: Point;
     currentZoom: number;
     delta: number;
@@ -42,13 +42,27 @@ export declare const getNewZoomAndOffsetFromDelta: ({ size, canvasSize, currentO
     offset: Point;
     zoom: number;
 };
+/** Zoom and offset showing the whole box in the middle of the view, with a margin in pixels of the screen */
+export declare const getZoomAndOffsetToFit: ({ box, padding, ...bounds }: ViewBounds & {
+    box: Rect;
+    padding: number;
+}) => {
+    offset: Point;
+    zoom: number;
+};
 export declare const getCurrentView: (settings: UtilsSettings) => Rect;
+/** The drawing, in pixels of the canvas */
 export declare const getMaskRect: (settings: UtilsSettings) => {
     x: number;
     y: number;
     width: number;
     height: number;
 };
+/**
+ * Whether a mask is drawn around the drawing: its size is fixed and it is smaller than the view. A drawing larger than
+ * the view on an axis covers it, its offset being kept inside the drawing
+ */
+export declare const hasMask: ({ size, canvasZoom, canvasSize, drawingSize }: UtilsSettings) => boolean;
 export declare const clipMask: (ctx: CanvasRenderingContext2D, settings: UtilsSettings) => void;
 export declare const drawMask: (ctx: CanvasRenderingContext2D, settings: UtilsSettings) => void;
 export declare const isCursorInsideMask: (cursorPosition: Point, settings: UtilsSettings) => boolean;

package/dist/editor/components/common/Button.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Button.css';
 type CommonType = {
     hidden?: boolean | undefined;
     disabled?: boolean | undefined;

package/dist/editor/components/common/FileInput.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Button.css';
 declare const FileInput: React.ForwardRefExoticComponent<{
     hidden?: boolean | undefined;
     disabled?: boolean | undefined;

package/dist/editor/components/common/Loading.d.ts

@@ -1,6 +1,5 @@
-import './Loading.css';
 export type LoadingType = {
     isLoading: boolean;
 };
-declare const Loading: ({ isLoading }: LoadingType) => import("react/jsx-runtime").JSX.Element | null;
+declare const Loading: ({ isLoading }: LoadingType) => import("react").JSX.Element | null;
 export default Loading;

package/dist/editor/components/common/Menu.d.ts

@@ -1,10 +1,11 @@
-import './Menu.css';
 type MenuType = {
     alignment?: 'left' | 'center' | 'right' | undefined;
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
     position?: 'top' | 'bottom' | 'left' | 'right' | undefined;
+    /** Ref of the element of the menu, which contains its sub menus */
+    menuRef?: React.Ref<HTMLDivElement>;
 };
-declare const Menu: ({ alignment, children, className, style, position }: MenuType) => import("react/jsx-runtime").JSX.Element;
+declare const Menu: ({ alignment, children, className, style, position, menuRef }: MenuType) => import("react").JSX.Element;
 export default Menu;

package/dist/editor/components/common/Modal.d.ts

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-import './Modal.css';
 type ModalType = {
     children: ReactNode;
     title: string;
@@ -7,5 +6,5 @@ type ModalType = {
     position?: 'center' | 'bottom';
     className?: string;
 };
-declare const Modal: ({ children, onClose, position, title, className }: ModalType) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ children, onClose, position, title, className }: ModalType) => import("react").JSX.Element;
 export default Modal;

package/dist/editor/components/common/Panel.d.ts

@@ -1,5 +1,4 @@
 import type React from 'react';
-import './Panel.css';
 import type { CSSProperties } from 'react';
 type PanelType = {
     vertical?: boolean;
@@ -11,5 +10,5 @@ type PanelType = {
     position?: 'bottom' | 'top' | 'left' | 'right' | undefined;
     alignment?: 'left' | 'right' | 'center' | undefined;
 };
-declare const Panel: ({ children, title, className, position, fitContainer, alignment, style, ...props }: PanelType) => import("react/jsx-runtime").JSX.Element;
+declare const Panel: ({ children, title, className, position, fitContainer, alignment, style, ...props }: PanelType) => React.JSX.Element;
 export default Panel;

package/dist/editor/components/common/Snackbar.d.ts

@@ -1,7 +1,6 @@
-import type { SnackBarType } from './../../../editor/types/snackbar';
-import './Snackbar.css';
+import type { SnackBarType } from './../../../editor/types/snackbar.js';
 type SnackbarContainerType = {
     snackbarList: SnackBarType[];
 };
-declare const SnackbarContainer: ({ snackbarList }: SnackbarContainerType) => import("react/jsx-runtime").JSX.Element;
+declare const SnackbarContainer: ({ snackbarList }: SnackbarContainerType) => import("react").JSX.Element;
 export default SnackbarContainer;

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

@@ -6,5 +6,5 @@ type ClosedPointsType = {
     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;
+declare const ClosedPointsField: ({ selectedSettings, setSelectedSettings, disabled, defaultValue, valueChanged }: ClosedPointsType) => React.JSX.Element;
 export default ClosedPointsField;

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

@@ -1,5 +1,4 @@
 import type React from 'react';
-import './ColorField.css';
 type ShapeStyleColorType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -11,5 +10,5 @@ type ShapeStyleColorType = {
     values: string[];
     valueChanged: (field: string, value: string | number) => void;
 };
-declare const ColorField: ({ selectedSettings, setSelectedSettings, title, mode, disabled, values, field, value, valueChanged }: ShapeStyleColorType) => import("react/jsx-runtime").JSX.Element | null;
+declare const ColorField: ({ selectedSettings, setSelectedSettings, title, mode, disabled, values, field, value, valueChanged }: ShapeStyleColorType) => React.JSX.Element | null;
 export default ColorField;