react-lasso-select 1.2.2 → 2.0.0

package/LICENSE.md

@@ -1,6 +1,6 @@
 # ISC License
 
-Copyright (c) 2021, akcyp
+Copyright (c) 2021-2025, akcyp
 
 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
 

package/README.md

@@ -9,11 +9,7 @@ A responsive react tool for marking irregular areas in images (lasso / free sele
 
 ## Demos
 
-- [Simple demo](https://codesandbox.io/s/react-lasso-select-issue2-h92hn?file=/src/App.tsx)
-
-- [Demo with typescript](https://codesandbox.io/s/react-lasso-select-demo-using-typescript-and-react-hooks-kddyt)
-
-- [Advanced demo](https://codesandbox.io/s/react-lasso-select-advanced-demo-g0yn4?file=/src/App.tsx)
+See `src/App.tsx`
 
 ## Features
 
@@ -50,7 +46,7 @@ import ReactLassoSelect from 'react-lasso-select';
 import { useState } from 'react';
 import ReactLassoSelect, { getCanvas } from 'react-lasso-select';
 
-export default function App () {
+export default function App() {
   const src = './demo.jpg';
   const [points, setPoints] = useState([]);
   const [clippedImg, setClippedImg] = useState();
@@ -59,10 +55,10 @@ export default function App () {
       <ReactLassoSelect
         value={points}
         src={src}
-        onChange={value => {
+        onChange={(value) => {
           setPoints(value);
         }}
-        onComplete={value => {
+        onComplete={(value) => {
           if (!value.length) return;
           getCanvas(src, value, (err, canvas) => {
             if (!err) {
@@ -71,9 +67,7 @@ export default function App () {
           });
         }}
       />
-      <div>
-        Points: {points.map(({x, y}) => `${x},${y}`).join(' ')}
-      </div>
+      <div>Points: {points.map(({ x, y }) => `${x},${y}`).join(' ')}</div>
       <div>
         <img src={clippedImg} alt="" />
       </div>
@@ -87,13 +81,14 @@ export default function App () {
 Most important props:
 
 - `src` (string) (required) Specifies the path to the image (or base64 string)
-- `value` (array of  {x: number, y: number}) Specifies input value
+- `value` (array of {x: number, y: number}) Specifies input value
 - `onComplete(path)` Callback fired every time path has been closed / updated / reset (use it for better performance insead of `onChange`)
 - `onChange(path)` Callback fired every time path has been changed (ex. point added/removed/replaced)
 
 Props related to component:
 
 - `disabled` (boolean, default false) Set to true to block selecting
+- `disabledShapeChange` (boolean, default false) Set to true to block shape change, but preserve possibility to move whole selection
 - `style` (object) CSS style attributes for component container
 - `viewBox` ({width: number, height: number}) Viewbox attribute for svg element, avoid changing the default value.
 

package/dist/index.d.ts

@@ -0,0 +1,179 @@
+import { Component } from 'react';
+import { CSSProperties } from 'react';
+import { default as default_2 } from 'prop-types';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { RefObject } from 'react';
+import { SyntheticEvent } from 'react';
+
+export declare function getCanvas(src: string, path: Point[], callback: (err: Error | null, canvas: HTMLCanvasElement) => void, crop?: boolean): void;
+
+declare enum pathActions {
+    ADD = "ADD",
+    DELETE = "DELETE",
+    MODIFY = "MODIFY",
+    MOVE = "MOVE",
+    RESET = "RESET",
+    CHANGE = "CHANGE"
+}
+
+declare type pathReducerAction = {
+    type: pathActions.ADD;
+    payload: Point;
+} | {
+    type: pathActions.DELETE;
+    payload: number;
+} | {
+    type: pathActions.MODIFY;
+    payload: {
+        index: number;
+    } & Point;
+} | {
+    type: pathActions.MOVE;
+    payload: Point;
+} | {
+    type: pathActions.RESET;
+} | {
+    type: pathActions.CHANGE;
+    payload: Point[];
+};
+
+declare interface PathState {
+    points: Point[];
+    closed: boolean;
+}
+
+declare interface Point {
+    x: number;
+    y: number;
+}
+
+export declare interface ReactLassoProps {
+    src: string;
+    value: Point[];
+    style: CSSProperties;
+    viewBox: Size;
+    disabled: boolean;
+    disabledShapeChange: boolean;
+    imageStyle: CSSProperties;
+    onImageLoad: (e: SyntheticEvent<HTMLImageElement, Event>) => void;
+    onImageError: (e: SyntheticEvent<HTMLImageElement, Event>) => void;
+    onChange?: (path: Point[]) => void;
+    onComplete?: (path: Point[]) => void;
+    imageAlt?: string;
+    crossOrigin?: 'anonymous' | 'use-credentials' | '';
+}
+
+export declare class ReactLassoSelect extends Component<ReactLassoProps, ReactLassoState> {
+    state: ReactLassoState;
+    imageRef: RefObject<HTMLImageElement>;
+    svgRef: RefObject<SVGSVGElement>;
+    svg: SVGHelper;
+    angles: number[];
+    path: PathState;
+    lastEmittedPoints: Point[];
+    lastUpdatedPoints: Point[];
+    imgError: boolean;
+    setPathFromPropsOnMediaLoad: boolean;
+    constructor(props: ReactLassoProps);
+    render(): JSX_2.Element;
+    componentDidUpdate(prevProps: ReactLassoProps): void;
+    convertPoints(points: Point[]): Point[];
+    checkIfPathUpdated(wasClosedBefore: boolean): void;
+    emitOnChange({ points }: PathState): void;
+    emitOnComplete(convertedPoints: Point[]): void;
+    setPointer({ x, y }: Point, force?: boolean): void;
+    hidePointer: () => void;
+    dispatchPathAction(action: pathReducerAction & {
+        pointer?: Point;
+    }): void;
+    isLoaded(): boolean;
+    getAspectRatio(): Point;
+    setPathStateFromProps(): void;
+    getRoundedPoints(): Point[];
+    getBorder(): Point[];
+    getPolygonPoints(): Point[];
+    getPolylinePoints(): Point[];
+    getMousePosition(e: touchOrMouseEvent<SVGSVGElement>, lookupForNearlyPoints?: boolean, lookupForApproximation?: boolean): [Point, {
+        point: Point;
+        index: number;
+    }];
+    onShapeDrag: ({ dx, dy }: Vector) => void;
+    onPointDrag: (idx: number, { dx, dy }: Vector) => void;
+    onPointClick: (idx: number) => void;
+    onDragEnd: () => void;
+    onMediaLoaded: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onMediaError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onClickTouchEvent: (e: touchOrMouseEvent<SVGSVGElement>) => void;
+    onClick: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
+    onTouchEnd: (e: React.TouchEvent<SVGSVGElement>) => void;
+    onMouseTouchMove: (e: touchOrMouseEvent<SVGSVGElement>) => void;
+    onContextMenu: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
+    static propTypes: {
+        value: default_2.Requireable<(Required<default_2.InferProps<{
+            x: default_2.Validator<number>;
+            y: default_2.Validator<number>;
+        }>> | null | undefined)[]>;
+        style: default_2.Requireable<default_2.InferProps<{}>>;
+        viewBox: default_2.Requireable<Required<default_2.InferProps<{
+            width: default_2.Validator<number>;
+            height: default_2.Validator<number>;
+        }>>>;
+        disabled: default_2.Requireable<boolean>;
+        disabledShapeChange: default_2.Requireable<boolean>;
+        onChange: default_2.Requireable<(...args: any[]) => any>;
+        onComplete: default_2.Requireable<(...args: any[]) => any>;
+        src: default_2.Validator<string>;
+        imageAlt: default_2.Requireable<string>;
+        crossOrigin: default_2.Requireable<string>;
+        imageStyle: default_2.Requireable<default_2.InferProps<{}>>;
+        onImageLoad: default_2.Requireable<(...args: any[]) => any>;
+        onImageError: default_2.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        value: never[];
+        style: {};
+        imageStyle: {};
+        viewBox: {
+            width: number;
+            height: number;
+        };
+        disabled: boolean;
+        disabledShapeChange: boolean;
+        onImageError: Function;
+        onImageLoad: Function;
+    };
+}
+
+export declare interface ReactLassoState {
+    path: PathState;
+    pointer: Point;
+}
+
+declare interface Size {
+    width: number;
+    height: number;
+}
+
+declare class SVGHelper {
+    getSvgElement: () => SVGSVGElement | null | undefined;
+    constructor(getSvgElement: () => SVGSVGElement | null | undefined);
+    getSvg(): SVGSVGElement;
+    getCTM(): DOMMatrix;
+    getViewboxSize(): DOMRect;
+    getRealSize(): Size;
+    getViewboxOffset(): Point;
+    convertViewboxPointsToReal(points: Point[]): Point[];
+    convertRealPointsToViewbox(points: Point[]): Point[];
+    getBorderPoints(repeatFirst?: boolean): Point[];
+    isAboveTheBorder({ x, y }: Point): boolean;
+    getMouseCoordinates(event: touchOrMouseEvent<SVGSVGElement>): Point;
+}
+
+declare type touchOrMouseEvent<T> = React.MouseEvent<T, MouseEvent> | React.TouchEvent<T>;
+
+declare interface Vector {
+    dx: number;
+    dy: number;
+}
+
+export { }