@willphan1712000/frontend 1.4.4 → 1.5.0

package/dist/index.d.mts

@@ -5,7 +5,7 @@ type Options$2 = {
     label: string;
     value: string;
 }[];
-interface Props$b {
+interface Props$c {
     options: Options$2;
     value: string;
     onChange: (value: string) => void;
@@ -17,9 +17,9 @@ interface Props$b {
  * @param onChange - a function to set a value
  * @returns
  */
-declare const DropdownSelect: ({ options, value, onChange }: Props$b) => react_jsx_runtime.JSX.Element;
+declare const DropdownSelect: ({ options, value, onChange }: Props$c) => react_jsx_runtime.JSX.Element;
 
-interface Props$a {
+interface Props$b {
     value: string;
     onChange: (value: string) => void;
     min?: string;
@@ -37,13 +37,13 @@ interface Props$a {
  * @param onChange - to set a value
  * @returns
  */
-declare const RangeSlider: ({ min, max, color, width, value, onChange, }: Props$a) => react_jsx_runtime.JSX.Element;
+declare const RangeSlider: ({ min, max, color, width, value, onChange, }: Props$b) => react_jsx_runtime.JSX.Element;
 
 type Options$1 = {
     label: ReactNode;
     value: string;
 }[];
-interface Props$9 {
+interface Props$a {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -57,9 +57,9 @@ interface Props$9 {
  * @options - list of options, format [{ label: React Node Syntax, value: string }]
  * @returns
  */
-declare const OptionSlider: ({ value, onChange, width, options, color, }: Props$9) => react_jsx_runtime.JSX.Element;
+declare const OptionSlider: ({ value, onChange, width, options, color, }: Props$a) => react_jsx_runtime.JSX.Element;
 
-interface Props$8 {
+interface Props$9 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -71,13 +71,13 @@ interface Props$8 {
  * @param width
  * @returns
  */
-declare const ColorPickerSlider: ({ value, onChange, width }: Props$8) => react_jsx_runtime.JSX.Element;
+declare const ColorPickerSlider: ({ value, onChange, width }: Props$9) => react_jsx_runtime.JSX.Element;
 
 type Options = {
     label: string;
     value: string;
 }[];
-interface Props$7 {
+interface Props$8 {
     options: Options;
     value: string[];
     onChange: React.Dispatch<React.SetStateAction<string[]>>;
@@ -91,9 +91,9 @@ interface Props$7 {
  * @param width - specify the width of the component
  * @returns
  */
-declare const MultiSelect: ({ options, value, onChange, width }: Props$7) => react_jsx_runtime.JSX.Element;
+declare const MultiSelect: ({ options, value, onChange, width }: Props$8) => react_jsx_runtime.JSX.Element;
 
-interface Props$6 {
+interface Props$7 {
     buttonType?: 'gradient' | 'solid' | 'normal';
 }
 interface Data {
@@ -117,9 +117,9 @@ interface Children {
  * @param second second color when using gradient button, default is #aa6392
  * @returns button UI component
  */
-declare const Button: ({ buttonType, content, main, first, second, text, isLoading, children, ...props }: Props$6 & Data & Children & React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ buttonType, content, main, first, second, text, isLoading, children, ...props }: Props$7 & Data & Children & React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
 
-interface Props$5 {
+interface Props$6 {
     src?: string;
     setValue: (src?: string) => void;
 }
@@ -143,9 +143,9 @@ interface Props$5 {
  *  <Avatar src={src} setValue={setValue} />
  * )
  */
-declare const Avatar: ({ src, setValue }: Props$5) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ src, setValue }: Props$6) => react_jsx_runtime.JSX.Element;
 
-interface Props$4 {
+interface Props$5 {
     value?: string;
     setValue?: (value?: string) => void;
     label?: string;
@@ -172,9 +172,9 @@ interface Props$4 {
  *      <InputGoogle value={value} setValue={setValue} label="Input Google Component Label" options={{ focusColor: "yellow" }}/>
  * )
  */
-declare const InputGoogle: ({ value, setValue, label, options, ...props }: Props$4 & React.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
+declare const InputGoogle: ({ value, setValue, label, options, ...props }: Props$5 & React.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
 
-interface Props$3 {
+interface Props$4 {
     value?: string;
     setValue?: (value?: string) => void;
     label?: string;
@@ -198,10 +198,10 @@ interface Props$3 {
  *      <TextArea value={value} setValue={setValue} label="Text Component Label" options={{ focusColor: "yellow" }}/>
  * )
  */
-declare const TextArea: ({ value, setValue, label, options, ...props }: Props$3 & React.ComponentProps<"textarea">) => react_jsx_runtime.JSX.Element;
+declare const TextArea: ({ value, setValue, label, options, ...props }: Props$4 & React.ComponentProps<"textarea">) => react_jsx_runtime.JSX.Element;
 
 type FileType = 'image/*' | 'image/jpeg' | 'image/png' | 'image/gif' | 'image/webp' | 'image/svg+xml' | 'image/bmp' | 'image/tiff' | 'video/*' | 'video/mp4' | 'video/mpeg' | 'video/quicktime' | 'video/x-msvideo' | 'video/x-ms-wmv' | 'video/webm' | 'video/ogg' | 'audito/*' | 'audio/mpeg' | 'audio/wav' | 'audio/ogg' | 'audio/aac' | 'audio/flac' | 'audio/x-wav' | 'application/*' | 'application/pdf' | 'application/msword' | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' | 'application/vnd.ms-excel' | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' | 'application/vnd.ms-powerpoint' | 'application/vnd.openxmlformats-officedocument.presentationml.presentation' | 'text/plain' | 'text/csv' | 'application/json' | 'application/zip' | 'application/octet-stream' | 'application/x-tar' | 'application/x-rar-compressed';
-interface Props$2 {
+interface Props$3 {
     file?: File;
     onChoose: (file: File) => void;
     onCancel?: () => void;
@@ -214,9 +214,9 @@ interface Props$2 {
  * @param onCancel if a popup is closed without any chosen data
  * @param acceptType accepted file type
  */
-declare const InputFile: ({ file, onChoose, onCancel, acceptType, ...props }: Props$2 & React$1.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
+declare const InputFile: ({ file, onChoose, onCancel, acceptType, ...props }: Props$3 & React$1.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
 
-interface Props$1 {
+interface Props$2 {
     setSrc?: (src?: string) => void;
 }
 /**
@@ -225,7 +225,7 @@ interface Props$1 {
  * @param setSrc
  * @returns
  */
-declare const UploadImage: ({ setSrc, ...props }: Props$1 & React.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
+declare const UploadImage: ({ setSrc, ...props }: Props$2 & React.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
 
 /**
  * A wrap around HTML Image Element
@@ -234,7 +234,7 @@ declare const UploadImage: ({ setSrc, ...props }: Props$1 & React.ComponentProps
  */
 declare const Image$1: ({ ...props }: React.ComponentProps<"img">) => react_jsx_runtime.JSX.Element;
 
-interface Props {
+interface Props$1 {
     src?: string;
     setSrc?: (src?: string) => void;
     isOpen?: boolean;
@@ -260,40 +260,42 @@ interface Props {
  * - When hitting cancel button, it changes isOpen state
  * - When hitting reset button, it runs reset method on transform object state
  */
-declare const ImageEditor: ({ src, setSrc, isOpen, setOpen, isNew, }: Props) => react_jsx_runtime.JSX.Element | undefined;
+declare const ImageEditor: ({ src, setSrc, isOpen, setOpen, isNew, }: Props$1) => react_jsx_runtime.JSX.Element | undefined;
 
-interface CanvasInterface {
-    /**
-     * Create a canvas
-     * @param number width of canvas
-     * @param number height of canvas
-     */
-    createCanvas(width: number, height: number): {
-        canvas: HTMLCanvasElement;
-        context: CanvasRenderingContext2D;
-    };
-    /**
-     * draw an image on canvas
-     */
-    drawImage(e: any, ctx: CanvasRenderingContext2D, x: number, y: number, scale: number, angle: number, canvas: HTMLCanvasElement, containerWidth: number, containerHeight: number): {
-        context: CanvasRenderingContext2D;
-        src: string;
-    };
-    /**
-     * Draw a color on canvas
-     */
-    drawColor(type: string, color: string, ctx: CanvasRenderingContext2D, width: number, ratio: number): [CanvasRenderingContext2D, string];
+interface WICanvas {
+    drawImage({ e, x, y, angle, width, height, containerHeight, containerWidth, }: {
+        e: HTMLImageElement;
+        x: number;
+        y: number;
+        angle: number;
+        width: number;
+        height: number;
+        containerWidth: number;
+        containerHeight: number;
+    }): void;
+    drawColor(type: string, color: string, width: number, ratio: number): void;
 }
-declare class Canvas implements CanvasInterface {
-    createCanvas(width: number, height: number): {
+declare class Canvas implements WICanvas {
+    private canvas;
+    private canvas2DContext;
+    private src?;
+    constructor(width: number, height: number);
+    get(): {
         canvas: HTMLCanvasElement;
         context: CanvasRenderingContext2D;
+        src: string | undefined;
     };
-    drawImage(e: HTMLImageElement, ctx: CanvasRenderingContext2D, x: number, y: number, scale: number, angle: number, canvas: HTMLCanvasElement, containerWidth: number, containerHeight: number): {
-        context: CanvasRenderingContext2D;
-        src: string;
-    };
-    drawColor(type: string, color: string, ctx: CanvasRenderingContext2D, width: number, ratio: number): [CanvasRenderingContext2D, string];
+    drawImage({ e, x, y, angle, width, height, containerHeight, containerWidth, }: {
+        e: HTMLImageElement;
+        x: number;
+        y: number;
+        angle: number;
+        width: number;
+        height: number;
+        containerWidth: number;
+        containerHeight: number;
+    }): void;
+    drawColor(type: string, color: string, width: number, ratio: number): void;
 }
 
 declare const Image: {
@@ -304,7 +306,7 @@ declare const Image: {
      */
     FromFileToImageSrc(file?: File | Blob): Promise<string | null>;
     /**
-     * Convert urlst
+     * Take a url, look for the corresponding image file, and convert it to base64 format
      * @param url
      * @returns
      */
@@ -318,63 +320,175 @@ declare const Image: {
     isBase64(url?: string): boolean;
 };
 
+interface IWElement {
+    /**
+     * Add Event Listener
+     * @param type
+     * @param listener
+     * @param options
+     */
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * Get element dimension
+     */
+    getDimension(): {
+        x: number;
+        y: number;
+        angle: number;
+        width: number;
+        height: number;
+        ratio: number;
+    };
+    /**
+     * Set element dimension
+     */
+    setDimension({ x, y, angle, width, height, }: {
+        x?: number;
+        y?: number;
+        angle?: number;
+        width?: number;
+        height?: number;
+    }): void;
+    /**
+     * Set position css property
+     * @param position
+     */
+    setPosition(position: 'fixed' | 'relative' | 'absolute' | 'unset'): void;
+    /**
+     * Perform drag
+     * @param x
+     * @param y
+     */
+    drag(x?: number, y?: number): void;
+    /**
+     * Perform rotation
+     * @param angle
+     */
+    rotate(angle?: number): void;
+    /**
+     * Perform resize
+     * @param width
+     * @param height
+     */
+    resize(width?: number, height?: number): void;
+    /**
+     * Method runs a side effect handler for a specific element
+     */
+    runSideEffectHandler(): void;
+}
+
+declare class TransformOperationExtension {
+    private xOrigin;
+    private yOrigin;
+    private wOrigin;
+    private hOrigin;
+    private isSideEffect;
+    private sideEffectList;
+    subscribeSideEffect(element: IWElement): void;
+    runSideEffectHandler(): void;
+    setSideEffectState(value?: boolean): void;
+    getSideEffectState(): boolean;
+    setOrigin({ x, y, width, height, }: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }): void;
+    getOrigin(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+
 /**
- * Element 1 : Image Wrapper
- *
- * Element 2 : Image Frame
- *
- * Element 3 : Image element
- *
- * Element 4 : Controller
- *
- * @example
- * ```ts
- * <div class="frame"> (2)
- *      <div class="wrapper"> (1)
- *          <img class="img__preview" /> (3)
- *      </div>
- * </div>
- * ```
+ * Transform Operation class
+ * - Design pattern used here is Composite Pattern
+ * - Implement IWElement as group of IWElement
  */
-declare class Transform {
-    private ele1;
-    private ele2;
+declare class TransformOperation extends TransformOperationExtension implements IWElement {
+    private list;
     private x;
     private y;
     private angle;
-    private w;
-    private h;
-    private wrapperClass;
-    private imgFrame;
-    private controllerClassName;
-    private frameClass;
-    private isRotateOffScreen;
-    private img;
-    private ratio;
-    private controllerContainer;
-    private controller;
-    constructor(ele1: HTMLElement, ele2?: HTMLElement, ele3?: string);
-    initialize(): Promise<void>;
-    reset(): void;
-    setState({ x, y, angle, w, }: {
+    private width;
+    private height;
+    setPosition(position: 'fixed' | 'relative' | 'absolute' | 'unset'): void;
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    setDimension({ x, y, angle, width, height, }: {
+        x?: number;
+        y?: number;
+        angle?: number;
+        width?: number;
+        height?: number;
+    }): void;
+    getDimension(): {
         x: number;
         y: number;
         angle: number;
-        w: number;
+        width: number;
+        height: number;
+        ratio: number;
+    };
+    /**
+     * Register an HTML Element to the TransformOperation
+     * @param element
+     */
+    subscribe(element: IWElement): void;
+    drag(x?: number, y?: number): void;
+    rotate(angle?: number): void;
+    resize(width?: number, height?: number): void;
+}
+
+interface Props {
+    container: HTMLElement;
+    frame: HTMLElement;
+    img: HTMLImageElement;
+    controller: HTMLElement;
+    topLeft: HTMLElement;
+    topRight: HTMLElement;
+    bottomLeft: HTMLElement;
+    bottomRight: HTMLElement;
+    rotate: HTMLElement;
+    transformOperation: TransformOperation;
+}
+/**
+ * Transform is responsible for correctly setting dimension and side effect for editor
+ * - Intialize state
+ * - Get state
+ * - Set state
+ * - Reset state
+ */
+declare class Transform {
+    private frame;
+    private img;
+    private container;
+    private controller;
+    private topLeft;
+    private topRight;
+    private bottomLeft;
+    private bottomRight;
+    private rotate;
+    private transformOperation;
+    constructor({ container, frame, img, controller, topLeft, topRight, bottomLeft, bottomRight, rotate, transformOperation, }: Props);
+    initialize(): Transform;
+    setState({ x, y, angle, width, height, }: {
+        x?: number;
+        y?: number;
+        angle?: number;
+        width?: number;
+        height?: number;
     }): void;
-    private setValue;
-    exportData(): {
+    getState(): {
         x: number;
         y: number;
         angle: number;
-        w: number;
-        h: number;
+        width: number;
+        height: number;
+        ratio: number;
     };
-    private repositionElement;
-    private resize;
-    private rotateBox;
-    private handleElementGoOffScreen;
-    private transform;
+    reset(): Transform;
 }
 
 interface HandleAsyncType<DataType> {
@@ -541,4 +655,77 @@ declare const SessionProvider: ({ value, children, }: {
  */
 declare const useAuthClient: (auth: AuthInterface<SessionType>) => SessionContextType;
 
-export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession };
+/**
+ * Linear Algebra library - Will Phan
+ * - Vector used in this library will be 3 dimension vector = [x, y, 1] : number[]
+ * - Accessing x by using vector[0]
+ * - Accessing y by using vector[1]
+ */
+declare const LinearAlgebra: {
+    /**
+     * Translate a point by a vector
+     * @param vector coordinates of a point
+     * @param translateVector vector for translation
+     * @throws Exception if the vector is not in 3 dimension
+     */
+    translateVector(vector: number[], translateVector: number[]): number[];
+    /**
+     * Rotate a vector by an angle in radian
+     * @param vector
+     * @param angle
+     * @throws Exception if the vector is not in 3 dimension
+     */
+    rotateVector(vector: number[], angle: number): number[];
+    /**
+     * Get opposite vector
+     * @param vector
+     */
+    getOppositeVector(vector: number[]): number[];
+    /**
+     * Nicolas Mattia formula
+     * @param vector
+     * @param translate
+     * @param angle
+     * @throws Exception if the vector is not in 3 dimension
+     *
+     * @link https://nmattia.com/posts/2020-03-03-drag-resize-rotate/
+     */
+    NicolasMattia(vector: number[], translate: number[], angle: number): number[];
+    /**
+     * Set coofficient for a vector
+     * @param coefficient
+     * @param vector
+     * @throws Exception if the vector is not in 3 dimension
+     */
+    setCoefficient(coefficient: number, vector: number[]): number[];
+    /**
+     * Plus 2 vectors
+     * @param vector1
+     * @param vector2
+     * @throws Exception if the vector is not in 3 dimension
+     */
+    plusVectors(vector1: number[], vector2: number[]): number[];
+    /**
+     * Get middle vector from 2 vectors
+     * @param vector1
+     * @param vector2
+     * @throws Exception if the vector is not in 3 dimension
+     */
+    getMiddleVectorFrom(vector1: number[], vector2: number[]): number[];
+    /**
+     * Compute dot products between two vectors
+     * @param vector1
+     * @param vector2
+     * @throws Exception if the vector is not in 3 dimension
+     */
+    dotProduct(vector1: number[], vector2: number[]): number;
+    /**
+     * Get vector magnitude
+     * - formula : if vector = [x,y] => magnitude = square root of x^2 + y^2
+     * @param vector
+     * @throws Exception if the vector is not in 3 dimension
+     */
+    getVectorMagnitude(vector: number[]): number;
+};
+
+export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession };