@willphan1712000/frontend 1.4.4 → 1.5.1

package/dist/index.d.ts

@@ -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,11 +117,14 @@ 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;
+    options?: {
+        defaultImage?: string;
+    };
 }
 /**
  * Avatar component. Combination of
@@ -135,17 +138,23 @@ interface Props$5 {
  * @param src source of an image which will be converted to base64 format automatically
  * @param setValue set state function for src
  *
+ * @dataflow
+ * - source of an image can be undefined. This case, source should be set to default image. In case there is no default image provided, source should be undefined. As source of image is edited, source changes and updates on the image preview
+ * - Every source needs to be converted to base64 format using provided conversion method
+ * - There is a defaultImage reference that stores the value of default image across the entire component so it can be used to restore default image when clicking delete button or when source of image is undefined
+ * - There is an initialImage reference that stores the value of an initial value of image source
+ *
  * @example
  * ... component declaration
  * const [src, setValue] = useState<string|undefined>(initialImageStringUrl)
  *
  * return (
- *  <Avatar src={src} setValue={setValue} />
+ *  <Avatar src={src} setValue={setValue} options={{defaultImage: unknown}}/>
  * )
  */
-declare const Avatar: ({ src, setValue }: Props$5) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ src, setValue, options }: Props$6) => react_jsx_runtime.JSX.Element;
 
-interface Props$4 {
+interface Props$5 {
     value?: string;
     setValue?: (value?: string) => void;
     label?: string;
@@ -172,9 +181,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 +207,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 +223,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 +234,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 +243,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 +269,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 +315,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 +329,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 +664,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 };