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

package/dist/{common → canvas}/types/tools.d.ts

@@ -1,6 +1,7 @@
-import type { ShapeType } from './Shapes';
+import type { ShapeType } from './Shapes.js';
 export type CustomToolInput = {
     id: string;
+    /** SVG markup, rendered as HTML by the editor: it must be trusted, never built from what a user typed or loaded */
     icon?: string;
     label?: string;
 } & ({
@@ -36,8 +37,9 @@ export type CustomToolInput = {
 });
 export type CustomTool = {
     id: string;
-    icon: string;
-    label: string;
+    /** SVG markup, rendered as HTML by the editor: it must be trusted, never built from what a user typed or loaded */
+    icon?: string;
+    label?: string;
 } & ({
     type: 'brush';
     settings: ToolsSettingsType<'brush'>;
@@ -154,11 +156,13 @@ export type ToolsTriangleSettings = SettingsStrokeColor & SettingsFillColor & Se
 export type ToolsPictureSettings = SettingsOpacity;
 export type ToolsGroupSettings = Partial<SettingsOpacity & SettingsStrokeColor & SettingsFillColor & SettingsLineWidth & SettingsLineDash & SettingsLineArrow>;
 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 : T extends 'group' ? ToolsGroupSettings : never;
-export type ActionsType = 'selection' | 'undo' | 'redo' | 'clear' | 'export' | 'loadfile' | 'savefile' | 'move' | 'uploadpicture' | 'addurlpicture';
+/** Tools handled by the canvas besides the drawing tools. The buttons of an editor (undo, export...) are not tools */
+export type ActionsType = 'selection' | 'move';
 export type ActionsTool = {
     id: string;
     type: ActionsType;
-    icon: string;
-    label: string;
+    /** SVG markup, rendered as HTML by the editor: it must be trusted, never built from what a user typed or loaded */
+    icon?: string;
+    label?: string;
 };
 export type ToolsType = CustomTool | ActionsTool;

package/dist/{common → canvas}/utils/array.d.ts

@@ -1,2 +1,4 @@
 export declare const compact: <T>(array: (T | undefined | null)[]) => T[];
+/** Copy of the array with the items inserted at the index, kept inside the array */
+export declare const insertAt: <T>(array: readonly T[], index: number, ...items: T[]) => T[];
 export declare const moveItemPosition: <T>(array: T[], positionToMove: number, positionToEnd: number) => T[];

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

@@ -1,5 +1,6 @@
-import type { UtilsSettings } from './../../canvas/constants/app';
-import type { Point, StyleShape } from './../../common/types/Shapes';
+import type { UtilsSettings } from './../../canvas/constants/app.js';
+import type { CanvasSize, Resize } from './../../canvas/types/Canvas.js';
+import type { Point, StyleShape } from './../../canvas/types/Shapes.js';
 export declare const initCanvasContext: (ctx: CanvasRenderingContext2D) => void;
 export declare const updateCanvasContext: (ctx: CanvasRenderingContext2D, style?: {
     fillColor?: string;
@@ -13,3 +14,18 @@ export declare const updateCanvasContext: (ctx: CanvasRenderingContext2D, style?
 }) => void;
 export declare const transformCanvas: (ctx: CanvasRenderingContext2D, settings: UtilsSettings, rotation?: number, translation?: Point) => void;
 export declare const drawPathWithFillAndStroke: (ctx: CanvasRenderingContext2D, path: Path2D, style?: Pick<StyleShape, "fillColor" | "strokeColor">) => void;
+/** Size of a canvas showing the whole drawing, scaled to the width it is displayed at */
+export declare const getScaledCanvasSize: (displayWidth: number, width: number, height: number) => CanvasSize;
+/** Size of a canvas at the scale 1, showing an area of the drawing as large as itself */
+export declare const getUnscaledCanvasSize: (width: number, height: number) => CanvasSize;
+/** The scaled canvas can be wider than its logical width */
+export declare const canScaleUp: (resize: Resize) => resize is "scale" | "scaleUp";
+/** The scaled canvas can be narrower than its logical width */
+export declare const canScaleDown: (resize: Resize) => resize is "scaleDown" | "scale";
+/** A 2D context of a canvas out of the page, to measure texts and test points when no Canvas is mounted. Null outside of a browser */
+export declare const createDetachedContext: () => CanvasRenderingContext2D | null;
+/**
+ * Measures texts without a canvas, about 0.6 em per character, so that texts can still be created outside of a browser.
+ * It only has the members used to measure a text
+ */
+export declare const createApproximateTextContext: () => CanvasRenderingContext2D;

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

@@ -0,0 +1,17 @@
+/** A press is a click when the pointer barely moves, during less than this duration */
+export declare const CLICK_MAX_DURATION_MS = 500;
+/** A second click closer to the first one than this delay is a double click */
+export declare const DOUBLE_CLICK_DELAY_MS = 300;
+/** Largest distance between the two taps of a double tap, in pixels of the screen: a finger moves more than a mouse */
+export declare const DOUBLE_TAP_MAX_DISTANCE = 20;
+/**
+ * Tells the clicks and the double clicks of the main button from the presses and the releases of the pointer. A second
+ * click soon after the first one, at the same place, is a double click, and a third click starts a new one. A release
+ * which is not a click, like the end of a drag, cancels the double click
+ */
+export declare const createClickTracker: () => {
+    press: (e: PointerEvent) => void;
+    reset: () => void;
+    /** Whether the release ends a click or a double click */
+    release: (e: PointerEvent) => "click" | "doubleClick" | undefined;
+};

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

@@ -1,5 +1,6 @@
-import type { UtilsSettings } from './../../canvas/constants/app';
-import type { DrawableShape, ShapeEntity, StateData } from './../../common/types/Shapes';
-export declare const cleanShapesBeforeExport: (shapes: ShapeEntity[]) => DrawableShape[];
-export declare const buildDataToExport: (shapes: ShapeEntity[], width: number, height: number) => StateData;
-export declare const addDefaultAndTempShapeProps: (shape: DrawableShape, settings: UtilsSettings) => ShapeEntity;
+import type { DataChanges } from './../../canvas/types/editor.js';
+import type { ExportedShape, ShapeEntity, StateData } from './../../canvas/types/Shapes.js';
+export declare const cleanShapesBeforeExport: (shapes: ShapeEntity[]) => ExportedShape[];
+export declare const buildDataToExport: (shapes: ShapeEntity[], width: number, height: number) => Required<StateData>;
+/** Changes from the previous shapes to the new ones, found by id. The new shapes are given with their export */
+export declare const getDataChanges: (previousShapes: ShapeEntity[], shapes: ShapeEntity[], exportedShapes: ExportedShape[]) => DataChanges;

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

@@ -0,0 +1,5 @@
+/**
+ * Compares two values, and the first level of two objects or arrays, with Object.is.
+ * To give to usePaintState when the selector builds an object or an array.
+ */
+export declare const shallowEqual: <T>(a: T, b: T) => boolean;

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

@@ -1,274 +1,44 @@
-import type { UtilsSettings } from './../../canvas/constants/app';
-import type { DrawableShape, ExportedDrawableShape, Point, ShapeEntity } from './../../common/types/Shapes';
+import { type PictureSrcResolver, type UtilsSettings } from './../../canvas/constants/app.js';
+import type { ExportImageOptions } from './../../canvas/types/editor.js';
+import type { ShapeEntity } from './../../canvas/types/Shapes.js';
 export declare const addSizeAndConvertSvgToObjectUrl: (svgFileContent: string) => string;
 export declare const isSvg: (fileOrUrl: File | string) => boolean;
-export declare const fetchAndStringify: (url: string) => Promise<string>;
+/**
+ * Kind of the source of a picture, which decides how it is loaded: an image data URL or a blob URL is loaded as it is, SVG
+ * markup is turned into a blob URL, a URL of the web is fetched. Other sources, like other data URLs or javascript:, are
+ * refused: the sources may come from data drawn by someone else
+ */
+type PictureSource = {
+    kind: 'direct';
+} | {
+    kind: 'svg';
+} | {
+    kind: 'remote';
+    url: string;
+} | {
+    kind: 'refused';
+};
+export declare const getPictureSource: (src: string) => PictureSource;
 export declare const downloadFile: (content: string, fileName: string) => void;
-export declare const getBase64Image: (img: HTMLImageElement) => string;
-export declare const getStringifiedImage: (shape: DrawableShape<"picture">) => string;
-export declare const getCanvasImage: ({ shapes, settings, view }: {
+/** The image encoded in a data URL, or undefined when it cannot be encoded: it is not loaded, or comes from another origin */
+export declare const getBase64Image: (img: HTMLImageElement) => string | undefined;
+/**
+ * Whether the source of a picture is exported encoded from its image: only a blob URL, which does not outlive the page, is
+ * encoded. The other sources are loaded again as they are, see getPictureSource
+ */
+export declare const isSourceEncodedOnExport: (src: string) => boolean;
+/**
+ * Loads the source of a picture in its image: a URL of the web is fetched first, so that the canvas can still be exported.
+ * Fails after a delay, or when the image is too large. The blob URL of the image is revoked once it is loaded or has failed
+ */
+export declare const loadPicture: (img: HTMLImageElement, src: string, resolvePictureSrc?: PictureSrcResolver) => Promise<void>;
+export declare const getCanvasImage: ({ shapes, settings, options }: {
     shapes: ShapeEntity[];
     settings: UtilsSettings;
-    view: "fitToShapes" | "defaultView" | "currentZoom";
+    options?: ExportImageOptions | undefined;
 }) => string;
 export declare const encodeShapesInString: (shapes: ShapeEntity[], width: number, height: number) => string;
+/** Content of a file as a data URL, read without blocking the page */
+export declare const readFileAsDataUrl: (file: Blob) => Promise<string>;
 export declare const decodeJson: (file: File) => Promise<unknown>;
-export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[], settings: UtilsSettings) => Promise<(({
-    id: string;
-    computed: {
-        borders: import("./../../common/types/Shapes").Rect;
-        outerBorders: import("./../../common/types/Shapes").Rect;
-        center: Point;
-        boundingBox: import("./../../common/types/Shapes").Rect;
-    };
-    path: Path2D;
-} & {
-    rotation?: number;
-    toolId?: string;
-    visible?: boolean;
-    locked?: boolean;
-    style?: import("./../../common/types/Shapes").StyleShape | undefined;
-} & import("./../../common/types/Shapes").Line & {
-    type: "line";
-} & {
-    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
-} & {
-    type: "line";
-    selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
-    arrows?: import("./../../common/types/Shapes").TriangleEntity[];
-}) | ({
-    id: string;
-    computed: {
-        borders: import("./../../common/types/Shapes").Rect;
-        outerBorders: import("./../../common/types/Shapes").Rect;
-        center: Point;
-        boundingBox: import("./../../common/types/Shapes").Rect;
-    };
-    path: Path2D;
-} & {
-    rotation?: number;
-    toolId?: string;
-    visible?: boolean;
-    locked?: boolean;
-    style?: import("./../../common/types/Shapes").StyleShape | undefined;
-} & import("./../../common/types/Shapes").Rect & {
-    src: string;
-} & {
-    type: "picture";
-    img: HTMLImageElement;
-    flipX?: boolean;
-    flipY?: boolean;
-    ratio?: number;
-} & {
-    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
-} & {
-    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
-    selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-}) | ({
-    id: string;
-    computed: {
-        borders: import("./../../common/types/Shapes").Rect;
-        outerBorders: import("./../../common/types/Shapes").Rect;
-        center: Point;
-        boundingBox: import("./../../common/types/Shapes").Rect;
-    };
-    path: Path2D;
-} & {
-    rotation?: number;
-    toolId?: string;
-    visible?: boolean;
-    locked?: boolean;
-    style?: import("./../../common/types/Shapes").StyleShape | undefined;
-} & import("./../../common/types/Shapes").Rect & {
-    value: string[];
-    fontSize: number;
-} & {
-    type: "text";
-    flipX?: boolean;
-    flipY?: boolean;
-    ratio?: number;
-} & {
-    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
-} & {
-    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
-    selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-}) | ({
-    id: string;
-    computed: {
-        borders: import("./../../common/types/Shapes").Rect;
-        outerBorders: import("./../../common/types/Shapes").Rect;
-        center: Point;
-        boundingBox: import("./../../common/types/Shapes").Rect;
-    };
-    path: Path2D;
-} & {
-    rotation?: number;
-    toolId?: string;
-    visible?: boolean;
-    locked?: boolean;
-    style?: import("./../../common/types/Shapes").StyleShape | undefined;
-} & import("./../../common/types/Shapes").Rect & {
-    type: "rect";
-} & {
-    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
-} & {
-    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
-    selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-}) | ({
-    id: string;
-    computed: {
-        borders: import("./../../common/types/Shapes").Rect;
-        outerBorders: import("./../../common/types/Shapes").Rect;
-        center: Point;
-        boundingBox: import("./../../common/types/Shapes").Rect;
-    };
-    path: Path2D;
-} & {
-    rotation?: number;
-    toolId?: string;
-    visible?: boolean;
-    locked?: boolean;
-    style?: import("./../../common/types/Shapes").StyleShape | undefined;
-} & import("./../../common/types/Shapes").Rect & {
-    type: "square";
-} & {
-    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
-} & {
-    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
-    selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-}) | ({
-    id: string;
-    computed: {
-        borders: import("./../../common/types/Shapes").Rect;
-        outerBorders: import("./../../common/types/Shapes").Rect;
-        center: Point;
-        boundingBox: import("./../../common/types/Shapes").Rect;
-    };
-    path: Path2D;
-} & {
-    rotation?: number;
-    toolId?: string;
-    visible?: boolean;
-    locked?: boolean;
-    style?: import("./../../common/types/Shapes").StyleShape | undefined;
-} & import("./../../common/types/Shapes").Circle & {
-    type: "circle";
-} & {
-    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
-} & {
-    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
-    selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-}) | ({
-    id: string;
-    computed: {
-        borders: import("./../../common/types/Shapes").Rect;
-        outerBorders: import("./../../common/types/Shapes").Rect;
-        center: Point;
-        boundingBox: import("./../../common/types/Shapes").Rect;
-    };
-    path: Path2D;
-} & {
-    rotation?: number;
-    toolId?: string;
-    visible?: boolean;
-    locked?: boolean;
-    style?: import("./../../common/types/Shapes").StyleShape | undefined;
-} & import("./../../common/types/Shapes").Ellipse & {
-    type: "ellipse";
-} & {
-    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
-} & {
-    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
-    selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-}) | ({
-    id: string;
-    computed: {
-        borders: import("./../../common/types/Shapes").Rect;
-        outerBorders: import("./../../common/types/Shapes").Rect;
-        center: Point;
-        boundingBox: import("./../../common/types/Shapes").Rect;
-    };
-    path: Path2D;
-} & {
-    rotation?: number;
-    toolId?: string;
-    visible?: boolean;
-    locked?: boolean;
-    style?: import("./../../common/types/Shapes").StyleShape | undefined;
-} & import("./../../common/types/Shapes").Polygon & {
-    type: "polygon";
-} & {
-    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
-} & {
-    type: "polygon" | "curve";
-    selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
-}) | ({
-    id: string;
-    computed: {
-        borders: import("./../../common/types/Shapes").Rect;
-        outerBorders: import("./../../common/types/Shapes").Rect;
-        center: Point;
-        boundingBox: import("./../../common/types/Shapes").Rect;
-    };
-    path: Path2D;
-} & {
-    rotation?: number;
-    toolId?: string;
-    visible?: boolean;
-    locked?: boolean;
-    style?: import("./../../common/types/Shapes").StyleShape | undefined;
-} & import("./../../common/types/Shapes").Curve & {
-    type: "curve";
-} & {
-    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
-} & {
-    type: "polygon" | "curve";
-    selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
-}) | ({
-    id: string;
-    computed: {
-        borders: import("./../../common/types/Shapes").Rect;
-        outerBorders: import("./../../common/types/Shapes").Rect;
-        center: Point;
-        boundingBox: import("./../../common/types/Shapes").Rect;
-    };
-    path: Path2D;
-} & {
-    rotation?: number;
-    toolId?: string;
-    visible?: boolean;
-    locked?: boolean;
-    style?: import("./../../common/types/Shapes").StyleShape | undefined;
-} & import("./../../common/types/Shapes").Brush & {
-    type: "brush";
-    scaleX?: number;
-    scaleY?: number;
-} & {
-    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
-} & {
-    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
-    selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-}) | ({
-    id: string;
-    computed: {
-        borders: import("./../../common/types/Shapes").Rect;
-        outerBorders: import("./../../common/types/Shapes").Rect;
-        center: Point;
-        boundingBox: import("./../../common/types/Shapes").Rect;
-    };
-    path: Path2D;
-} & {
-    rotation?: number;
-    toolId?: string;
-    visible?: boolean;
-    locked?: boolean;
-    style?: import("./../../common/types/Shapes").StyleShape | undefined;
-} & import("./../../common/types/Shapes").Rect & {
-    type: "group";
-    shapes: ShapeEntity[];
-} & {
-    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
-} & {
-    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
-    selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-}))[]>;
+export {};

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

@@ -1,2 +1,2 @@
-import type { UtilsSettings } from './../../canvas/constants/app';
+import type { UtilsSettings } from './../../canvas/constants/app.js';
 export declare const drawGrid: (ctx: CanvasRenderingContext2D, settings: UtilsSettings) => void;

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

@@ -1,14 +1,19 @@
-import type { UtilsSettings } from './../../canvas/constants/app';
-import type { CanvasSize } from './../../common/types/Canvas';
-import type { HoverModeData } from './../../common/types/Mode';
-import type { Point, Rect, SelectionType, ShapeEntity } from './../../common/types/Shapes';
-export declare const getCursorPosition: (e: MouseEvent | TouchEvent) => {
-    clientX: number;
-    clientY: number;
+import type { UtilsSettings } from './../../canvas/constants/app.js';
+import type { CanvasSize } from './../../canvas/types/Canvas.js';
+import type { HoverModeData } from './../../canvas/types/Mode.js';
+import type { Point, Rect, SelectionType, ShapeEntity } from './../../canvas/types/Shapes.js';
+export declare const getCursorPositionInElement: (e: MouseEvent, element: HTMLElement, canvasSize: CanvasSize) => Point;
+/** Place of the canvas in the viewport */
+type CanvasRect = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
+/** Point of the drawing at a position of the viewport, the canvas being displayed in the rect */
+export declare const clientToCanvasPosition: ({ clientX, clientY }: Pick<MouseEvent, "clientX" | "clientY">, { left, top, width, height }: CanvasRect, { canvasSize, canvasOffset }: UtilsSettings) => Point;
+/** Position in the viewport of a point of the drawing, the canvas being displayed in the rect: the reverse of clientToCanvasPosition */
+export declare const canvasToClientPosition: (point: Point, { left, top, width, height }: CanvasRect, { canvasSize, canvasOffset }: UtilsSettings) => {
+    x: number;
+    y: number;
 };
-export declare const getCursorPositionInElement: (e: MouseEvent | TouchEvent, element: HTMLElement, canvasSize: CanvasSize) => Point;
-export declare const getCursorPositionInTransformedCanvas: (e: MouseEvent | TouchEvent, canvas: HTMLElement | null, settings: UtilsSettings) => Point;
-export declare const isTouchGesture: (e: MouseEvent | TouchEvent) => e is TouchEvent;
+export declare const getCursorPositionInTransformedCanvas: (e: Pick<MouseEvent, "clientX" | "clientY">, canvas: HTMLElement, settings: UtilsSettings) => Point;
+export declare const isTouchGesture: (e: PointerEvent) => boolean;
 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: (ctx: CanvasRenderingContext2D, selection: SelectionType, position: Point, settings: UtilsSettings, checkAnchors?: boolean, radius?: number) => false | HoverModeData;
@@ -21,7 +26,12 @@ export declare const checkCurveLinesSelectionIntersection: (ctx: CanvasRendering
 export declare const checkPositionIntersection: (ctx: CanvasRenderingContext2D, shape: SelectionType, position: Point, settings: UtilsSettings) => false | HoverModeData;
 export declare function getRectIntersection(rect1: Rect, rect2: Rect): Rect | undefined;
 export declare const checkSelectionFrameCollision: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, selectionFrame: [Point, Point]) => boolean;
-export declare const shouldCancelLongPress: (e: MouseEvent | TouchEvent, startPosition: {
-    clientX: number;
-    clientY: number;
-}) => boolean;
+type ClientPosition = Pick<MouseEvent, 'clientX' | 'clientY'>;
+/** Whether the pointer has moved by more than a few pixels, or the given distance, since the start of a press */
+export declare const hasPointerMoved: (e: ClientPosition, startPosition: ClientPosition, threshold?: number) => boolean;
+export declare const shouldCancelLongPress: (e: PointerEvent, startPosition: ClientPosition) => boolean;
+/** Visible shapes under a point, from the foreground. Locked shapes are found too */
+export declare const findShapesAt: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], point: Point, settings: UtilsSettings) => ShapeEntity[];
+/** The shape of the foreground under a point, as found by findShapesAt */
+export declare const findShapeAt: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], point: Point, settings: UtilsSettings) => ShapeEntity | undefined;
+export {};

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

@@ -0,0 +1,11 @@
+export declare const omit: <T extends Record<string, unknown>>(keys: string[], obj: T) => T;
+export declare const set: <T extends Record<string, any> | unknown[]>(path: string | number | (string | number)[], value: unknown, obj: T) => T;
+/** Copy of the object without its entries set to undefined */
+export declare const omitUndefined: <T extends object>(obj: T) => T;
+/** Shallow merges the options into the defaults, ignoring the options set to undefined */
+export declare const withDefaults: <T extends object>(defaults: T, options: object | undefined) => T;
+export declare const isRecord: (value: unknown) => value is Record<string, unknown>;
+/** Customizer of mergeWith which replaces the arrays instead of merging them */
+export declare const replaceArrays: (objValue: unknown, srcValue: unknown) => unknown;
+export declare const mergeWith: (customMergeFn: (objValue: unknown, srcValue: unknown, key: string) => unknown, target: unknown, source: unknown) => unknown;
+export declare const isEqual: (a: unknown, b: unknown) => boolean;

package/dist/{src/common/utils/selection.d.ts → canvas/utils/selectedShapes.d.ts}

@@ -1,4 +1,4 @@
-import type { SelectionType, ShapeEntity } from './../../../common/types/Shapes';
-import type { CustomTool } from './../../../common/types/tools';
+import type { SelectionType, ShapeEntity } from './../../canvas/types/Shapes.js';
+import type { CustomTool } from './../../canvas/types/tools.js';
 export declare const getSelectedShapes: (selection: SelectionType | undefined) => ShapeEntity[];
 export declare const getSelectedShapesTools: (selection: SelectionType | undefined, availableTools: CustomTool[]) => CustomTool | undefined;

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

@@ -0,0 +1,16 @@
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { Point, Rect, ShapeEntity } from './../../../canvas/types/Shapes.js';
+/** Whether the anchors of a shape are its points, a line, a polygon or a curve, instead of its borders */
+export declare const hasPointAnchors: (shape: ShapeEntity) => shape is ShapeEntity<"line" | "polygon" | "curve">;
+export declare const getAnchorRadius: (settings: UtilsSettings) => number;
+/** Center of the anchor of the rotation, above the borders of a selection */
+export declare const getRotationAnchorCenter: (borders: Rect, settings: UtilsSettings) => Point;
+/** Center of an anchor of the resize, at its position on the borders of a selection */
+export declare const getResizeAnchorCenter: (borders: Rect, [ratioX, ratioY]: Point) => Point;
+/** Strokes the borders of a selection */
+export declare const strokeBorders: (ctx: CanvasRenderingContext2D, { x, y, width, height }: Rect) => void;
+export declare const setAnchorsStyle: (ctx: CanvasRenderingContext2D, settings: UtilsSettings) => void;
+/** Draws an anchor with the style of the anchors, with a halo of the given color when it is hovered */
+export declare const drawAnchor: (ctx: CanvasRenderingContext2D, [x, y]: Point, settings: UtilsSettings, haloColor?: string) => void;
+/** Draws the stem and the anchor of the rotation, then the anchors of the resize, around the borders of a selection */
+export declare const drawRectAnchors: (ctx: CanvasRenderingContext2D, borders: Rect, settings: UtilsSettings) => void;

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

@@ -1,4 +1,4 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeData } from './../../../common/types/Mode';
-import type { Point, ShapeEntity } from './../../../common/types/Shapes';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { SelectionModeData } from './../../../canvas/types/Mode.js';
+import type { Point, ShapeEntity } from './../../../canvas/types/Shapes.js';
 export declare const drawSelectionGroup: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<"group">, selectionColor: string, selectionWidth: number, selectionMode: SelectionModeData<number | Point>, settings: UtilsSettings, withAnchors: boolean) => void;

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

@@ -1,13 +1,6 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { HoverModeData } from './../../../common/types/Mode';
-import type { DrawableShape, Point, Rect, SelectionLinesType, ShapeEntity } from './../../../common/types/Shapes';
-export declare const createLineSelectionPath: (path: Path2D | undefined, shape: DrawableShape<"line" | "polygon" | "curve"> & {
-    points: readonly Point[];
-}, computed: {
-    borders: Rect;
-    outerBorders: Rect;
-    center: Point;
-}, settings: UtilsSettings) => SelectionLinesType;
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { HoverModeData } from './../../../canvas/types/Mode.js';
+import type { ShapeEntity } from './../../../canvas/types/Shapes.js';
 export declare const drawLineSelection: ({ ctx, shape, withAnchors, selectionWidth, selectionColor, hoverMode, settings }: {
     ctx: CanvasRenderingContext2D;
     shape: ShapeEntity<"line"> | ShapeEntity<"polygon"> | ShapeEntity<"curve">;

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

@@ -1,15 +1,10 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { Point, Rect, SelectionDefaultType, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
-export declare const createRecSelectionPath: (path: Path2D | undefined, computed: {
-    borders: Rect;
-    outerBorders: Rect;
-    center: Point;
-}, settings: UtilsSettings) => SelectionDefaultType;
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { SelectionModeResize } from './../../../canvas/types/Mode.js';
+import type { Point, SelectionType, ShapeEntity } from './../../../canvas/types/Shapes.js';
+/** Outline of a shape drawn by its selection: its path, but for a picture or a text, which are framed by their borders */
+export declare const getSelectionOutline: (shape: ShapeEntity) => Path2D | undefined;
 export declare const drawBoundingBox: (ctx: CanvasRenderingContext2D, shape: SelectionType, selectionWidth: number, settings: UtilsSettings) => void;
-export declare const drawSelectionRect: (ctx: CanvasRenderingContext2D, shape: ShapeEntity & {
-    selection?: SelectionDefaultType | undefined;
-}, selectionColor: string, selectionWidth: number, settings: UtilsSettings, withAnchors: boolean) => void;
+export declare const drawSelectionRect: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, selectionColor: string, selectionWidth: number, settings: UtilsSettings, withAnchors: boolean) => void;
 export declare const resizeRectSelection: (cursorPosition: Point, originalShape: ShapeEntity, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => {
     borderX: number;
     borderHeight: number;

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

@@ -1,3 +1,3 @@
-import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { Point } from './../../../common/types/Shapes';
+import type { UtilsSettings } from './../../../canvas/constants/app.js';
+import type { Point } from './../../../canvas/types/Shapes.js';
 export declare const drawFrame: (ctx: CanvasRenderingContext2D, selectionFrame: [Point, Point], settings: UtilsSettings) => void;

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

@@ -1,12 +1,14 @@
-import type { UtilsSettings } from './../../canvas/constants/app';
-import type { HoverModeData, SelectionModeData } from './../../common/types/Mode';
-import type { Point, SelectionType, ShapeEntity } from './../../common/types/Shapes';
+import type { UtilsSettings } from './../../canvas/constants/app.js';
+import type { HoverModeData, SelectionModeData } from './../../canvas/types/Mode.js';
+import type { Point, SelectionType, ShapeEntity } from './../../canvas/types/Shapes.js';
+/** Whether no gesture is running: the hovered shape is only searched and shown then */
+export declare const isIdleSelectionMode: ({ mode }: SelectionModeData<Point | number>) => boolean;
 export declare const getNewSelectionData: (hoverMode: HoverModeData, selectedShape: SelectionType, cursorPosition: Point) => SelectionModeData<Point | number> | undefined;
-export declare const selectShape: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], cursorPosition: Point, settings: UtilsSettings, selectedShape: SelectionType | undefined, isTouchGesture: boolean, withFrameSelection: boolean, behavior?: "add" | "remove" | "replace") => {
+export declare const selectShape: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], cursorPosition: Point, settings: UtilsSettings, selectedShape: SelectionType | undefined, isTouchGesture: boolean, withFrameSelection: boolean, behavior?: "add" | "toggle" | "replace", preferSelection?: boolean) => {
     mode: SelectionModeData<Point | number>;
     shape: SelectionType | undefined;
 };
 export declare const buildShapesGroup: (shapes: ShapeEntity[], settings: UtilsSettings) => SelectionType | undefined;
 export declare const applyToSelectedShape: (applyToShape: (shape: ShapeEntity, settings: UtilsSettings) => ShapeEntity, settings: UtilsSettings) => (selection: SelectionType | undefined) => SelectionType | undefined;
 export declare const addToSelectedShapes: (selection: SelectionType | undefined, shapes: ShapeEntity[]) => ShapeEntity[];
-export declare const omitFromSelectedShapes: (selection: SelectionType | undefined, shape: ShapeEntity) => ShapeEntity[];
+export declare const omitFromSelectedShapes: (selection: SelectionType | undefined, shapes: ShapeEntity[]) => ShapeEntity[];