@willphan1712000/frontend 1.4.4 → 1.5.1

package/dist/index.mjs

@@ -10,6 +10,12 @@ function _array_with_holes(arr) {
 function _array_without_holes(arr) {
     if (Array.isArray(arr)) return _array_like_to_array(arr);
 }
+function _assert_this_initialized(self) {
+    if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+    return self;
+}
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -39,6 +45,10 @@ function _async_to_generator(fn) {
         });
     };
 }
+function _call_super(_this, derived, args) {
+    derived = _get_prototype_of(derived);
+    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
+}
 function _class_call_check(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
         throw new TypeError("Cannot call a class as a function");
@@ -85,6 +95,25 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _get_prototype_of(o);
+}
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
 function _iterable_to_array(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
@@ -188,12 +217,29 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
+function _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) {
+        return call;
+    }
+    return _assert_this_initialized(self);
+}
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
 function _to_consumable_array(arr) {
     return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
 }
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
 function _unsupported_iterable_to_array(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _array_like_to_array(o, minLen);
@@ -202,6 +248,14 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
+function _is_native_reflect_construct() {
+    try {
+        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (_) {}
+    return (_is_native_reflect_construct = function() {
+        return !!result;
+    })();
+}
 function _ts_generator(thisArg, body) {
     var f, y, t, _ = {
         label: 0,
@@ -1692,42 +1746,44 @@ var styles8 = {
 var styles_default8 = styles8;
 // src/components/Avatar/Avatar.tsx
 import { useEffect as useEffect7, useRef as useRef7, useState as useState7 } from "react";
-import { Fragment, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var Avatar = function(param) {
-    var src = param.src, setValue = param.setValue;
-    var setSrc = function setSrc() {
-        return _async_to_generator(function() {
-            var translatedSrc;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        return [
-                            4,
-                            Image_default2.FromStringToImageSrc(src)
-                        ];
-                    case 1:
-                        translatedSrc = _state.sent();
-                        if (!translatedSrc) return [
-                            2
-                        ];
-                        defaultImage.current = translatedSrc;
-                        setValue(translatedSrc);
-                        return [
-                            2
-                        ];
-                }
-            });
-        })();
-    };
+    var src = param.src, setValue = param.setValue, options = param.options;
     var _useState7 = _sliced_to_array(useState7(false), 2), isOpen = _useState7[0], setOpen = _useState7[1];
     var _useState71 = _sliced_to_array(useState7(false), 2), isNew = _useState71[0], setNew = _useState71[1];
+    var defaultImage = useRef7(void 0);
+    var initialImage = useRef7(void 0);
     var uploadImageRef = useRef7(null);
-    var defaultImage = useRef7("");
+    var isAbleToEdit = initialImage.current ? src !== defaultImage.current && src !== initialImage.current : false;
+    var isAbleToRemove = initialImage.current ? src !== defaultImage.current : false;
     useEffect7(function() {
-        setSrc();
-    }, [
-        src
-    ]);
+        (function setSrc() {
+            return _async_to_generator(function() {
+                var _ref, _ref1;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            return [
+                                4,
+                                Image_default2.FromStringToImageSrc(options === null || options === void 0 ? void 0 : options.defaultImage)
+                            ];
+                        case 1:
+                            defaultImage.current = (_ref = _state.sent()) !== null && _ref !== void 0 ? _ref : options === null || options === void 0 ? void 0 : options.defaultImage;
+                            return [
+                                4,
+                                Image_default2.FromStringToImageSrc(src)
+                            ];
+                        case 2:
+                            initialImage.current = (_ref1 = _state.sent()) !== null && _ref1 !== void 0 ? _ref1 : src;
+                            setValue(src ? initialImage.current : defaultImage.current);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        })();
+    }, []);
     return /* @__PURE__ */ jsxs11("div", {
         style: styles_default8.container,
         children: [
@@ -1765,38 +1821,35 @@ var Avatar = function(param) {
                     });
                 }
             }),
-            src !== defaultImage.current && /* @__PURE__ */ jsxs11(Fragment, {
+            isAbleToRemove && /* @__PURE__ */ jsxs11(Button_default, {
+                style: styles_default8.remove,
+                onClick: function() {
+                    var _defaultImage_current;
+                    setValue((_defaultImage_current = defaultImage.current) !== null && _defaultImage_current !== void 0 ? _defaultImage_current : void 0);
+                    setNew(function(prev) {
+                        return !prev;
+                    });
+                },
                 children: [
-                    /* @__PURE__ */ jsxs11(Button_default, {
-                        style: styles_default8.remove,
-                        onClick: function() {
-                            setValue(defaultImage.current);
-                            setNew(function(prev) {
-                                return !prev;
-                            });
-                        },
-                        children: [
-                            /* @__PURE__ */ jsx13(FaTrashCan, {
-                                size: others.iconSize,
-                                color: "red"
-                            }),
-                            "Remove"
-                        ]
+                    /* @__PURE__ */ jsx13(FaTrashCan, {
+                        size: others.iconSize,
+                        color: "red"
                     }),
-                    /* @__PURE__ */ jsxs11(Button_default, {
-                        style: styles_default8.edit,
-                        onClick: function() {
-                            return setOpen(function(prev) {
-                                return !prev;
-                            });
-                        },
-                        children: [
-                            /* @__PURE__ */ jsx13(RiEditLine, {
-                                size: others.iconSize
-                            }),
-                            "Edit"
-                        ]
-                    })
+                    "Remove"
+                ]
+            }),
+            isAbleToEdit && /* @__PURE__ */ jsxs11(Button_default, {
+                style: styles_default8.edit,
+                onClick: function() {
+                    return setOpen(function(prev) {
+                        return !prev;
+                    });
+                },
+                children: [
+                    /* @__PURE__ */ jsx13(RiEditLine, {
+                        size: others.iconSize
+                    }),
+                    "Edit"
                 ]
             })
         ]
@@ -2050,7 +2103,7 @@ var InputFile = function(_param) {
 };
 var InputFile_default = InputFile;
 // src/components/Image/UploadImage.tsx
-import { Fragment as Fragment2, jsx as jsx17 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx17 } from "react/jsx-runtime";
 var UploadImage = function(_param) {
     var handleSetSrc = function handleSetSrc(file) {
         return _async_to_generator(function() {
@@ -2078,7 +2131,7 @@ var UploadImage = function(_param) {
     var _param_setSrc = _param.setSrc, setSrc = _param_setSrc === void 0 ? function() {} : _param_setSrc, props = _object_without_properties(_param, [
         "setSrc"
     ]);
-    return /* @__PURE__ */ jsx17(Fragment2, {
+    return /* @__PURE__ */ jsx17(Fragment, {
         children: /* @__PURE__ */ jsx17(InputFile_default, _object_spread_props(_object_spread({
             onChoose: handleSetSrc,
             acceptType: "image/*"
@@ -2104,7 +2157,7 @@ var Image = function(_param) {
 };
 var Image_default = Image;
 // src/components/Image/ImageEditor/ImageEditor.tsx
-import { useEffect as useEffect10, useMemo, useRef as useRef10, useState as useState11 } from "react";
+import { useEffect as useEffect12, useMemo, useRef as useRef10, useState as useState13 } from "react";
 // src/components/Image/ImageEditor/ImageEditor.styles.ts
 var imageEditorStyles = {
     imageEditor: {
@@ -2118,36 +2171,7 @@ var imageEditorStyles = {
         top: 0,
         left: 0,
         backdropFilter: "blur(20px)",
-        zIndex: 99,
-        paddingLeft: "30px",
-        paddingRight: "30px"
-    },
-    frame: {
-        padding: "50px",
-        backgroundColor: "white",
-        border: "solid 4px #000",
-        borderStyle: "dashed",
-        borderRadius: "50%",
-        overflow: "hidden",
-        maxWidth: "500px",
-        width: "100%",
-        maxHeight: "500px",
-        aspectRatio: 1 / 1,
-        position: "relative"
-    },
-    wrapper: {
-        position: "absolute",
-        transformOrigin: "top left",
-        userSelect: "none"
-    },
-    img: {
-        objectFit: "contain",
-        position: "absolute",
-        top: 0,
-        left: 0,
-        display: "block",
-        zIndex: 1,
-        transform: "translate(-50%, -50%)"
+        zIndex: 99
     },
     buttons: {
         display: "flex",
@@ -2155,234 +2179,1218 @@ var imageEditorStyles = {
         alignItems: "center",
         gap: "20px",
         padding: "30px"
+    },
+    instruction: {
+        fontWeight: "bold",
+        fontSize: "20px"
     }
 };
 var ImageEditor_styles_default = imageEditorStyles;
-// src/components/Image/ImageEditor/ImageEditor.tsx
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
-var ImageEditor = function(param) {
-    var src = param.src, _param_setSrc = param.setSrc, setSrc = _param_setSrc === void 0 ? function() {} : _param_setSrc, _param_isOpen = param.isOpen, isOpen = _param_isOpen === void 0 ? false : _param_isOpen, _param_setOpen = param.setOpen, setOpen = _param_setOpen === void 0 ? function() {} : _param_setOpen, _param_isNew = param.isNew, isNew = _param_isNew === void 0 ? false : _param_isNew;
-    var createTransform = function createTransform() {
-        return _async_to_generator(function() {
-            var transform2;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        if (!frame.current || !wrapper.current || !img.current) return [
-                            2
-                        ];
-                        transform2 = new Transform(wrapper.current, frame.current);
-                        return [
-                            4,
-                            transform2.initialize()
-                        ];
-                    case 1:
-                        _state.sent();
-                        if (transformState.current) {
-                            transform2.setState(transformState.current);
-                        } else {
-                            transform2.reset();
-                        }
-                        setTransform(transform2);
-                        return [
-                            2
-                        ];
-                }
-            });
-        })();
-    };
-    var handleCanvasToSrc = function handleCanvasToSrc() {
-        if (!frame.current || !wrapper.current || !img.current || !transform) return;
-        var canvasInstance = new Canvas();
-        var _canvasInstance_createCanvas = canvasInstance.createCanvas(700, 700), canvas = _canvasInstance_createCanvas.canvas, context = _canvasInstance_createCanvas.context;
-        var _transform_exportData = transform.exportData(), x = _transform_exportData.x, y = _transform_exportData.y, angle = _transform_exportData.angle;
-        transformState.current = transform.exportData();
-        var _canvasInstance_drawImage = canvasInstance.drawImage(img.current, context, x, y, 1, angle, canvas, frame.current.clientWidth, frame.current.clientHeight), src2 = _canvasInstance_drawImage.src;
-        return src2;
-    };
-    var handleAccept = function handleAccept() {
-        setSrc(handleCanvasToSrc());
-        setOpen(false);
-    };
-    var handleCancel = function handleCancel() {
-        setOpen(false);
-    };
-    var handleReset = function handleReset() {
-        if (!transform) return;
-        transform.reset();
-    };
-    var frame = useRef10(null);
-    var wrapper = useRef10(null);
-    var img = useRef10(null);
-    var _useState11 = _sliced_to_array(useState11(void 0), 2), transform = _useState11[0], setTransform = _useState11[1];
-    var transformState = useRef10(void 0);
-    var originalSrc = useMemo(function() {
-        transformState.current = void 0;
-        return src;
-    }, [
-        isNew
-    ]);
-    useEffect10(function() {
-        isOpen ? createTransform() : setTransform(void 0);
-    }, [
-        isOpen
-    ]);
-    if (!isOpen) return;
-    return /* @__PURE__ */ jsxs14("div", {
-        style: ImageEditor_styles_default.imageEditor,
-        children: [
-            /* @__PURE__ */ jsx19("p", {
-                children: "Drag, Zoom, or Rotate image"
-            }),
-            /* @__PURE__ */ jsx19("div", {
-                ref: frame,
-                style: ImageEditor_styles_default.frame,
-                children: /* @__PURE__ */ jsx19("div", {
-                    ref: wrapper,
-                    style: ImageEditor_styles_default.wrapper,
-                    children: /* @__PURE__ */ jsx19("img", {
-                        src: originalSrc,
-                        style: ImageEditor_styles_default.img,
-                        ref: img
-                    })
-                })
-            }),
-            /* @__PURE__ */ jsxs14("div", {
-                style: ImageEditor_styles_default.buttons,
-                children: [
-                    /* @__PURE__ */ jsx19(Button_default, {
-                        buttonType: "solid",
-                        content: "Accept",
-                        onClick: handleAccept
-                    }),
-                    /* @__PURE__ */ jsx19(Button_default, {
-                        buttonType: "solid",
-                        content: "Cancel",
-                        onClick: handleCancel
-                    }),
-                    /* @__PURE__ */ jsx19(Button_default, {
-                        buttonType: "solid",
-                        content: "Reset",
-                        onClick: handleReset
-                    })
-                ]
-            })
-        ]
-    });
-};
-var ImageEditor_default = ImageEditor;
-// src/utilities/canvas/Canvas.ts
-var Canvas = /*#__PURE__*/ function() {
+// src/utilities/Transform/Events/MouseEvents.ts
+var WMouseEvent = /*#__PURE__*/ function() {
     "use strict";
-    function Canvas() {
-        _class_call_check(this, Canvas);
+    function WMouseEvent(transformOperation2) {
+        _class_call_check(this, WMouseEvent);
+        this.transformOperation = transformOperation2;
     }
-    _create_class(Canvas, [
+    _create_class(WMouseEvent, [
         {
-            key: "createCanvas",
-            value: function createCanvas(width, height) {
-                var canvas = document.createElement("canvas");
-                var context = canvas.getContext("2d");
-                canvas.width = width;
-                canvas.height = height;
-                return {
-                    canvas: canvas,
-                    context: context
+            key: "drag",
+            value: function drag(e) {
+                var _this = this;
+                e.stopPropagation();
+                var controller = new AbortController();
+                var _this_transformOperation_getDimension = this.transformOperation.getDimension(), initX = _this_transformOperation_getDimension.x, initY = _this_transformOperation_getDimension.y;
+                var mousePressX = e.clientX;
+                var mousePressY = e.clientY;
+                var onMouseMove = function(event) {
+                    var x = event.clientX;
+                    var y = event.clientY;
+                    var posX = initX + (x - mousePressX);
+                    var posY = initY + (y - mousePressY);
+                    _this.transformOperation.setDimension({
+                        x: posX,
+                        y: posY
+                    });
                 };
+                var onMouseUp = function() {
+                    controller.abort();
+                };
+                window.addEventListener("mousemove", onMouseMove, {
+                    signal: controller.signal
+                });
+                window.addEventListener("mouseup", onMouseUp, {
+                    signal: controller.signal
+                });
             }
         },
         {
-            key: "drawImage",
-            value: function drawImage(e, ctx, x, y, scale, angle, canvas, containerWidth, containerHeight) {
-                var ratioX = canvas.width / containerWidth;
-                var ratioY = canvas.height / containerHeight;
-                var finalX = x * ratioX;
-                var finalY = y * ratioY;
-                var midleWidth = e.width * ratioX;
-                var midleHeight = e.height * ratioY;
-                var finalWidth = e.width * ratioX * scale;
-                var finalHeight = e.height * ratioY * scale;
-                ctx.save();
-                ctx.translate(finalX + midleWidth / 2, finalY + midleHeight / 2);
-                ctx.rotate(angle * Math.PI / 180);
-                ctx.drawImage(e, -finalWidth / 2, -finalHeight / 2, finalWidth, finalHeight);
-                ctx.restore();
-                var src = ctx.canvas.toDataURL();
-                var srcEncoded = src.split(",")[1];
-                return {
-                    context: ctx,
-                    src: src
+            key: "rotate",
+            value: function rotate(e) {
+                var _this = this;
+                var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+                    top: false,
+                    bottom: false
                 };
+                e.stopPropagation();
+                var controller = new AbortController();
+                var _this_transformOperation_getDimension = this.transformOperation.getDimension(), x = _this_transformOperation_getDimension.x, y = _this_transformOperation_getDimension.y, width = _this_transformOperation_getDimension.width, height = _this_transformOperation_getDimension.height;
+                var centerX = x + width / 2;
+                var centerY = y + height / 2;
+                var _this_transformOperation_getOrigin = this.transformOperation.getOrigin(), xOrigin = _this_transformOperation_getOrigin.x, yOrigin = _this_transformOperation_getOrigin.y;
+                var compensation = options.top ? 0 : 180;
+                compensation = options.bottom ? 180 : 0;
+                var onMouseMove = function(event) {
+                    var x2 = event.clientX - xOrigin;
+                    var y2 = event.clientY - yOrigin;
+                    var angle = Math.atan2(y2 - centerY, x2 - centerX) + Math.PI / 2;
+                    angle *= 180 / Math.PI;
+                    angle += compensation;
+                    _this.transformOperation.setDimension({
+                        angle: angle
+                    });
+                };
+                var onMouseUp = function() {
+                    controller.abort();
+                };
+                window.addEventListener("mousemove", onMouseMove, {
+                    signal: controller.signal
+                });
+                window.addEventListener("mouseup", onMouseUp, {
+                    signal: controller.signal
+                });
             }
         },
         {
-            key: "drawColor",
-            value: function drawColor(type, color, ctx, width, ratio) {
-                if (type === "") color = "#ffffff";
-                if (type === "gradient") {
-                    var breakdownArr = color.split(",");
-                    var _ref = [
-                        Number(breakdownArr[0]),
-                        breakdownArr[1],
-                        Number(breakdownArr[2]),
-                        breakdownArr[3],
-                        Number(breakdownArr[4])
-                    ], angle = _ref[0], color1 = _ref[1], percent1 = _ref[2], color2 = _ref[3], percent2 = _ref[4];
-                    var radians = (angle - 180) * Math.PI / 180;
-                    var x0 = width / 2 + width / 2 * Math.cos(radians - Math.PI / 2);
-                    var y0 = width * ratio / 2 + width * ratio / 2 * Math.sin(radians - Math.PI / 2);
-                    var x1 = width / 2 - width / 2 * Math.cos(radians - Math.PI / 2);
-                    var y1 = width * ratio / 2 - width * ratio / 2 * Math.sin(radians - Math.PI / 2);
-                    var gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-                    gradient.addColorStop(percent1 / 100, color1);
-                    gradient.addColorStop(percent2 / 100, color2);
-                    ctx.fillStyle = gradient;
-                    ctx.fillRect(0, 0, width, width * ratio);
-                    var srcEncoded = ctx.canvas.toDataURL().split(",")[1];
-                    return [
-                        ctx,
-                        srcEncoded
-                    ];
+            key: "resize",
+            value: function resize(e, param) {
+                var _this = this;
+                var _param_topLeft = param.topLeft, topLeft = _param_topLeft === void 0 ? false : _param_topLeft, _param_topRight = param.topRight, topRight = _param_topRight === void 0 ? false : _param_topRight, _param_bottomLeft = param.bottomLeft, bottomLeft = _param_bottomLeft === void 0 ? false : _param_bottomLeft, _param_bottomRight = param.bottomRight, bottomRight = _param_bottomRight === void 0 ? false : _param_bottomRight;
+                e.stopPropagation();
+                var controller = new AbortController();
+                var minWidth = 40;
+                var _this_transformOperation_getDimension = this.transformOperation.getDimension(), initX = _this_transformOperation_getDimension.x, initY = _this_transformOperation_getDimension.y, initAngleDegree = _this_transformOperation_getDimension.angle, initW = _this_transformOperation_getDimension.width, initH = _this_transformOperation_getDimension.height, ratio = _this_transformOperation_getDimension.ratio;
+                var _this_transformOperation_getOrigin = this.transformOperation.getOrigin(), xOrigin = _this_transformOperation_getOrigin.x, yOrigin = _this_transformOperation_getOrigin.y;
+                var initAngle = initAngleDegree * Math.PI / 180;
+                var topLeftResizer = [
+                    initX,
+                    initY,
+                    1
+                ];
+                var topRightResizer = [
+                    initX + initW,
+                    initY,
+                    1
+                ];
+                var bottomLeftResizer = [
+                    initX,
+                    initY + initH,
+                    1
+                ];
+                var bottomRightResizer = [
+                    initX + initW,
+                    initY + initH,
+                    1
+                ];
+                var p, q;
+                if (topLeft) {
+                    q = topLeftResizer;
+                    p = bottomRightResizer;
+                } else if (topRight) {
+                    q = topRightResizer;
+                    p = bottomLeftResizer;
+                } else if (bottomLeft) {
+                    q = bottomLeftResizer, p = topRightResizer;
+                } else if (bottomRight) {
+                    q = bottomRightResizer, p = topLeftResizer;
                 } else {
-                    ctx.fillStyle = color;
-                    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-                    var srcEncoded1 = ctx.canvas.toDataURL().split(",")[1];
-                    return [
-                        ctx,
-                        srcEncoded1
-                    ];
+                    return;
                 }
+                var rotated_p = LinearAlgebra_default.NicolasMattia(p, LinearAlgebra_default.getMiddleVectorFrom(q, p), initAngle);
+                var rotated_q = LinearAlgebra_default.NicolasMattia(q, LinearAlgebra_default.getMiddleVectorFrom(p, q), initAngle);
+                var rotated_diagonal = LinearAlgebra_default.plusVectors(rotated_q, LinearAlgebra_default.getOppositeVector(rotated_p));
+                var rotated_diagonal_magnitude = LinearAlgebra_default.getVectorMagnitude(rotated_diagonal);
+                var onMouseMove = function(event) {
+                    var cursor = [
+                        event.clientX - xOrigin,
+                        event.clientY - yOrigin,
+                        1
+                    ];
+                    var moved = LinearAlgebra_default.plusVectors(cursor, LinearAlgebra_default.getOppositeVector(rotated_q));
+                    var moved_projection_coefficient = LinearAlgebra_default.dotProduct(rotated_diagonal, moved) / (rotated_diagonal_magnitude * rotated_diagonal_magnitude);
+                    var moved_projection = LinearAlgebra_default.setCoefficient(moved_projection_coefficient, rotated_diagonal);
+                    var moved_q = LinearAlgebra_default.plusVectors(rotated_q, moved_projection);
+                    var newP = LinearAlgebra_default.NicolasMattia(rotated_p, LinearAlgebra_default.getMiddleVectorFrom(moved_q, rotated_p), -initAngle);
+                    var newQ = LinearAlgebra_default.NicolasMattia(moved_q, LinearAlgebra_default.getMiddleVectorFrom(moved_q, rotated_p), -initAngle);
+                    var newWH = LinearAlgebra_default.plusVectors(newQ, LinearAlgebra_default.getOppositeVector(newP));
+                    var newW = Math.abs(newWH[0]);
+                    if (newW <= minWidth) {
+                        newW = minWidth;
+                        return;
+                    }
+                    if (topLeft) {
+                        _this.transformOperation.setDimension({
+                            x: newP[0] - newW,
+                            y: newP[1] - newW / ratio,
+                            width: newW,
+                            height: newW / ratio
+                        });
+                    } else if (topRight) {
+                        _this.transformOperation.setDimension({
+                            x: newP[0],
+                            y: newP[1] - newW / ratio,
+                            width: newW,
+                            height: newW / ratio
+                        });
+                    } else if (bottomLeft) {
+                        _this.transformOperation.setDimension({
+                            x: newP[0] - newW,
+                            y: newP[1],
+                            width: newW,
+                            height: newW / ratio
+                        });
+                    } else if (bottomRight) {
+                        _this.transformOperation.setDimension({
+                            x: newP[0],
+                            y: newP[1],
+                            width: newW,
+                            height: newW / ratio
+                        });
+                    } else {
+                        return;
+                    }
+                };
+                var onMouseUp = function() {
+                    controller.abort();
+                };
+                window.addEventListener("mousemove", onMouseMove, {
+                    signal: controller.signal
+                });
+                window.addEventListener("mouseup", onMouseUp, {
+                    signal: controller.signal
+                });
             }
         }
     ]);
-    return Canvas;
+    return WMouseEvent;
 }();
-// src/utilities/canvas/Image.ts
-var Image2 = {
-    /**
-   * Convert file (blob) to base64 string format
-   * @param file
-   * @returns
-   */ FromFileToImageSrc: function FromFileToImageSrc(file) {
-        return new Promise(function(resolve, reject) {
-            if (!file) return resolve(null);
-            var reader = new FileReader();
-            reader.readAsDataURL(file);
-            reader.onload = function(readerEvent) {
-                var _readerEvent_target;
-                if ((_readerEvent_target = readerEvent.target) === null || _readerEvent_target === void 0 ? void 0 : _readerEvent_target.result) {
-                    var _readerEvent_target1;
-                    return resolve((_readerEvent_target1 = readerEvent.target) === null || _readerEvent_target1 === void 0 ? void 0 : _readerEvent_target1.result);
-                }
-                reject("Error getting the image source");
-            };
-            reader.onerror = function() {
-                reject("Error getting the image source");
-            };
-        });
-    },
-    FromStringToImageSrc: /**
-   * Convert urlst
+// src/utilities/Transform/Events/TouchEvents.ts
+var WTouchEvent = /*#__PURE__*/ function() {
+    "use strict";
+    function WTouchEvent(transformOperation2) {
+        _class_call_check(this, WTouchEvent);
+        this.transformOperation = transformOperation2;
+    }
+    _create_class(WTouchEvent, [
+        {
+            key: "drag",
+            value: function drag(e) {
+                var _this = this;
+                e.stopPropagation();
+                var controller = new AbortController();
+                var _this_transformOperation_getDimension = this.transformOperation.getDimension(), initX = _this_transformOperation_getDimension.x, initY = _this_transformOperation_getDimension.y;
+                var mousePressX = e.touches[0].clientX;
+                var mousePressY = e.touches[0].clientY;
+                var onTouchMove = function(event) {
+                    var x = event.touches[0].clientX;
+                    var y = event.touches[0].clientY;
+                    var posX = initX + (x - mousePressX);
+                    var posY = initY + (y - mousePressY);
+                    _this.transformOperation.setDimension({
+                        x: posX,
+                        y: posY
+                    });
+                };
+                var onTouchEnd = function() {
+                    controller.abort();
+                };
+                window.addEventListener("touchmove", onTouchMove, {
+                    signal: controller.signal,
+                    passive: true
+                });
+                window.addEventListener("touchend", onTouchEnd, {
+                    signal: controller.signal
+                });
+            }
+        },
+        {
+            key: "rotate",
+            value: function rotate(e) {
+                var _this = this;
+                var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+                    top: false,
+                    bottom: false
+                };
+                e.stopPropagation();
+                var controller = new AbortController();
+                var _this_transformOperation_getDimension = this.transformOperation.getDimension(), x = _this_transformOperation_getDimension.x, y = _this_transformOperation_getDimension.y, width = _this_transformOperation_getDimension.width, height = _this_transformOperation_getDimension.height;
+                var centerX = x + width / 2;
+                var centerY = y + height / 2;
+                var _this_transformOperation_getOrigin = this.transformOperation.getOrigin(), xOrigin = _this_transformOperation_getOrigin.x, yOrigin = _this_transformOperation_getOrigin.y;
+                var compensation = options.top ? 0 : 180;
+                compensation = options.bottom ? 180 : 0;
+                var onTouchMove = function(event) {
+                    var x2 = event.touches[0].clientX - xOrigin;
+                    var y2 = event.touches[0].clientY - yOrigin;
+                    var angle = Math.atan2(y2 - centerY, x2 - centerX) + Math.PI / 2;
+                    angle *= 180 / Math.PI;
+                    angle += compensation;
+                    _this.transformOperation.setDimension({
+                        angle: angle
+                    });
+                };
+                var onTouchEnd = function() {
+                    controller.abort();
+                };
+                window.addEventListener("touchmove", onTouchMove, {
+                    signal: controller.signal,
+                    passive: true
+                });
+                window.addEventListener("touchend", onTouchEnd, {
+                    signal: controller.signal
+                });
+            }
+        },
+        {
+            key: "resize",
+            value: function resize(e, param) {
+                var _this = this;
+                var _param_topLeft = param.topLeft, topLeft = _param_topLeft === void 0 ? false : _param_topLeft, _param_topRight = param.topRight, topRight = _param_topRight === void 0 ? false : _param_topRight, _param_bottomLeft = param.bottomLeft, bottomLeft = _param_bottomLeft === void 0 ? false : _param_bottomLeft, _param_bottomRight = param.bottomRight, bottomRight = _param_bottomRight === void 0 ? false : _param_bottomRight;
+                e.stopPropagation();
+                var controller = new AbortController();
+                var minWidth = 40;
+                var _this_transformOperation_getDimension = this.transformOperation.getDimension(), initX = _this_transformOperation_getDimension.x, initY = _this_transformOperation_getDimension.y, initAngleDegree = _this_transformOperation_getDimension.angle, initW = _this_transformOperation_getDimension.width, initH = _this_transformOperation_getDimension.height, ratio = _this_transformOperation_getDimension.ratio;
+                var _this_transformOperation_getOrigin = this.transformOperation.getOrigin(), xOrigin = _this_transformOperation_getOrigin.x, yOrigin = _this_transformOperation_getOrigin.y;
+                var initAngle = initAngleDegree * Math.PI / 180;
+                var topLeftResizer = [
+                    initX,
+                    initY,
+                    1
+                ];
+                var topRightResizer = [
+                    initX + initW,
+                    initY,
+                    1
+                ];
+                var bottomLeftResizer = [
+                    initX,
+                    initY + initH,
+                    1
+                ];
+                var bottomRightResizer = [
+                    initX + initW,
+                    initY + initH,
+                    1
+                ];
+                var p, q;
+                if (topLeft) {
+                    q = topLeftResizer;
+                    p = bottomRightResizer;
+                } else if (topRight) {
+                    q = topRightResizer;
+                    p = bottomLeftResizer;
+                } else if (bottomLeft) {
+                    q = bottomLeftResizer, p = topRightResizer;
+                } else if (bottomRight) {
+                    q = bottomRightResizer, p = topLeftResizer;
+                } else {
+                    return;
+                }
+                var rotated_p = LinearAlgebra_default.NicolasMattia(p, LinearAlgebra_default.getMiddleVectorFrom(q, p), initAngle);
+                var rotated_q = LinearAlgebra_default.NicolasMattia(q, LinearAlgebra_default.getMiddleVectorFrom(p, q), initAngle);
+                var rotated_diagonal = LinearAlgebra_default.plusVectors(rotated_q, LinearAlgebra_default.getOppositeVector(rotated_p));
+                var rotated_diagonal_magnitude = LinearAlgebra_default.getVectorMagnitude(rotated_diagonal);
+                var onTouchMove = function(event) {
+                    var cursor = [
+                        event.touches[0].clientX - xOrigin,
+                        event.touches[0].clientY - yOrigin,
+                        1
+                    ];
+                    var moved = LinearAlgebra_default.plusVectors(cursor, LinearAlgebra_default.getOppositeVector(rotated_q));
+                    var moved_projection_coefficient = LinearAlgebra_default.dotProduct(rotated_diagonal, moved) / (rotated_diagonal_magnitude * rotated_diagonal_magnitude);
+                    var moved_projection = LinearAlgebra_default.setCoefficient(moved_projection_coefficient, rotated_diagonal);
+                    var moved_q = LinearAlgebra_default.plusVectors(rotated_q, moved_projection);
+                    var newP = LinearAlgebra_default.NicolasMattia(rotated_p, LinearAlgebra_default.getMiddleVectorFrom(moved_q, rotated_p), -initAngle);
+                    var newQ = LinearAlgebra_default.NicolasMattia(moved_q, LinearAlgebra_default.getMiddleVectorFrom(moved_q, rotated_p), -initAngle);
+                    var newWH = LinearAlgebra_default.plusVectors(newQ, LinearAlgebra_default.getOppositeVector(newP));
+                    var newW = Math.abs(newWH[0]);
+                    if (newW <= minWidth) {
+                        newW = minWidth;
+                        return;
+                    }
+                    if (topLeft) {
+                        _this.transformOperation.setDimension({
+                            x: newP[0] - newW,
+                            y: newP[1] - newW / ratio,
+                            width: newW,
+                            height: newW / ratio
+                        });
+                    } else if (topRight) {
+                        _this.transformOperation.setDimension({
+                            x: newP[0],
+                            y: newP[1] - newW / ratio,
+                            width: newW,
+                            height: newW / ratio
+                        });
+                    } else if (bottomLeft) {
+                        _this.transformOperation.setDimension({
+                            x: newP[0] - newW,
+                            y: newP[1],
+                            width: newW,
+                            height: newW / ratio
+                        });
+                    } else if (bottomRight) {
+                        _this.transformOperation.setDimension({
+                            x: newP[0],
+                            y: newP[1],
+                            width: newW,
+                            height: newW / ratio
+                        });
+                    } else {
+                        return;
+                    }
+                };
+                var onTouchEnd = function() {
+                    controller.abort();
+                };
+                window.addEventListener("touchmove", onTouchMove, {
+                    signal: controller.signal,
+                    passive: true
+                });
+                window.addEventListener("touchend", onTouchEnd, {
+                    signal: controller.signal
+                });
+            }
+        }
+    ]);
+    return WTouchEvent;
+}();
+// src/components/Image/ImageEditor/MainElements/MainElements.tsx
+import { useEffect as useEffect11, useState as useState12 } from "react";
+// src/components/Image/ImageEditor/context.ts
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var MyContext3 = createContext4(void 0);
+function useMyContext3() {
+    var data = useContext4(MyContext3);
+    if (data === void 0) throw new Error("Context is undefined");
+    return data;
+}
+// src/components/Image/ImageEditor/MainElements/MainElements.styles.ts
+var resize = {
+    position: "absolute",
+    backgroundColor: "white",
+    width: "20px",
+    height: "20px",
+    borderRadius: "50%",
+    boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
+    transition: "all .1s linear",
+    cursor: "pointer"
+};
+var background = {
+    visibility: "hidden",
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "60px",
+    height: "60px",
+    borderRadius: "50%",
+    boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
+    zIndex: -1,
+    transition: "all .1s linear"
+};
+var MainElementStyles = {
+    container: {
+        position: "relative",
+        border: "solid 4px #000",
+        borderStyle: "dashed",
+        borderRadius: "50%",
+        width: "100%",
+        maxWidth: "508px",
+        aspectRatio: 1,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        boxSizing: "border-box"
+    },
+    frame: {
+        borderRadius: "50%",
+        boxSizing: "border-box",
+        padding: "50px",
+        backgroundColor: "white",
+        overflow: "hidden",
+        maxWidth: "500px",
+        width: "100%",
+        maxHeight: "500px",
+        aspectRatio: 1 / 1,
+        position: "relative"
+    },
+    img: {
+        objectFit: "contain",
+        position: "absolute",
+        userSelect: "none",
+        top: 0,
+        left: 0,
+        display: "block",
+        zIndex: 0
+    },
+    controller: {
+        position: "absolute",
+        userSelect: "none",
+        border: "solid 3px #6924d5",
+        top: 0,
+        left: 0
+    },
+    resizeDown: {
+        color: "white",
+        backgroundColor: "#6924d5"
+    },
+    topLeft: _object_spread_props(_object_spread({}, resize), {
+        top: "-10px",
+        left: "-10px"
+    }),
+    topRight: _object_spread_props(_object_spread({}, resize), {
+        top: "-10px",
+        right: "-10px"
+    }),
+    bottomLeft: _object_spread_props(_object_spread({}, resize), {
+        bottom: "-10px",
+        left: "-10px"
+    }),
+    bottomRight: _object_spread_props(_object_spread({}, resize), {
+        bottom: "-10px",
+        right: "-10px"
+    }),
+    buttonBackground: _object_spread({}, background),
+    buttonBackgroundDown: _object_spread_props(_object_spread({}, background), {
+        visibility: "visible"
+    }),
+    rotate: _object_spread_props(_object_spread({}, resize), {
+        top: "-50px",
+        width: "30px",
+        height: "30px",
+        left: "50%",
+        transform: "translate(-50%, 0%)",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: "alias"
+    }),
+    rotateBottom: _object_spread_props(_object_spread({}, resize), {
+        display: "none",
+        bottom: "-50px",
+        width: "30px",
+        height: "30px",
+        left: "50%",
+        transform: "translate(-50%, 0%)",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: "alias"
+    }),
+    label: {
+        position: "absolute",
+        top: "-100px",
+        left: "50%",
+        transformOrigin: "left",
+        transform: "translate(-50%, 0)",
+        margin: 0,
+        color: "black",
+        width: "max-content"
+    }
+};
+var MainElements_styles_default = MainElementStyles;
+// src/components/Image/ImageEditor/MainElements/Rotate.tsx
+import { useEffect as useEffect10, useState as useState11 } from "react";
+import { FaArrowRotateLeft } from "react-icons/fa6";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var Rotate = function() {
+    var _useState11 = _sliced_to_array(useState11(false), 2), rotate = _useState11[0], setRotate = _useState11[1];
+    var _useMyContext3 = useMyContext3(), transformOperation2 = _useMyContext3.transformOperation, refs = _useMyContext3.refs;
+    var mouseEvent = new WMouseEvent(transformOperation2);
+    var touchEvent = new WTouchEvent(transformOperation2);
+    var angle = transformOperation2.getDimension().angle;
+    var handleBackground = function(value) {
+        return value ? MainElements_styles_default.buttonBackgroundDown : MainElements_styles_default.buttonBackground;
+    };
+    useEffect10(function() {
+        var controller = new AbortController();
+        var handler = function() {
+            setRotate(false);
+        };
+        window.addEventListener("mouseup", function() {
+            handler();
+        }, {
+            signal: controller.signal
+        });
+        window.addEventListener("touchend", function() {
+            handler();
+        }, {
+            signal: controller.signal
+        });
+        return function() {
+            controller.abort();
+        };
+    }, []);
+    return /* @__PURE__ */ jsxs14(Fragment2, {
+        children: [
+            /* @__PURE__ */ jsxs14("div", {
+                ref: refs.rotate,
+                style: rotate ? _object_spread({}, MainElements_styles_default.rotate, MainElements_styles_default.resizeDown) : MainElements_styles_default.rotate,
+                onMouseDown: function(e) {
+                    setRotate(true);
+                    mouseEvent.rotate(e, {
+                        top: true
+                    });
+                },
+                onTouchStart: function(e) {
+                    setRotate(true);
+                    touchEvent.rotate(e, {
+                        top: true
+                    });
+                },
+                children: [
+                    /* @__PURE__ */ jsx19("div", {
+                        style: handleBackground(rotate)
+                    }),
+                    /* @__PURE__ */ jsx19(FaArrowRotateLeft, {
+                        size: "15"
+                    }),
+                    rotate && /* @__PURE__ */ jsxs14("p", {
+                        style: _object_spread_props(_object_spread({}, MainElements_styles_default.label), {
+                            rotate: "".concat(-angle.toFixed(0), "deg")
+                        }),
+                        children: [
+                            angle.toFixed(0),
+                            "\xB0"
+                        ]
+                    })
+                ]
+            }),
+            /* @__PURE__ */ jsxs14("div", {
+                ref: refs.rotateBottom,
+                style: rotate ? _object_spread({}, MainElements_styles_default.rotateBottom, MainElements_styles_default.resizeDown) : _object_spread({}, MainElements_styles_default.rotateBottom),
+                onMouseDown: function(e) {
+                    setRotate(true);
+                    mouseEvent.rotate(e, {
+                        bottom: true
+                    });
+                },
+                onTouchStart: function(e) {
+                    setRotate(true);
+                    touchEvent.rotate(e, {
+                        bottom: true
+                    });
+                },
+                children: [
+                    /* @__PURE__ */ jsx19("div", {
+                        style: handleBackground(rotate)
+                    }),
+                    /* @__PURE__ */ jsx19(FaArrowRotateLeft, {
+                        size: "15"
+                    }),
+                    rotate && /* @__PURE__ */ jsxs14("p", {
+                        style: _object_spread_props(_object_spread({}, MainElements_styles_default.label), {
+                            top: "auto",
+                            bottom: "-100px",
+                            rotate: "".concat(-angle.toFixed(0), "deg")
+                        }),
+                        children: [
+                            angle.toFixed(0),
+                            "\xB0"
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+var Rotate_default = Rotate;
+// src/components/Image/ImageEditor/MainElements/MainElements.tsx
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var MainElements = function() {
+    var _useMyContext3 = useMyContext3(), refs = _useMyContext3.refs, imgRefs = _useMyContext3.imgRefs, originalSrc = _useMyContext3.src, transformOperation2 = _useMyContext3.transformOperation;
+    var mouseEvent = new WMouseEvent(transformOperation2);
+    var touchEvent = new WTouchEvent(transformOperation2);
+    var _useState12 = _sliced_to_array(useState12(false), 2), topLeft = _useState12[0], settopLeft = _useState12[1];
+    var _useState121 = _sliced_to_array(useState12(false), 2), topRight = _useState121[0], settopRight = _useState121[1];
+    var _useState122 = _sliced_to_array(useState12(false), 2), bottomLeft = _useState122[0], setbottomLeft = _useState122[1];
+    var _useState123 = _sliced_to_array(useState12(false), 2), bottomRight = _useState123[0], setbottomRight = _useState123[1];
+    var _useState124 = _sliced_to_array(useState12(false), 2), reRender = _useState124[0], triggierReRender = _useState124[1];
+    var _transformOperation2_getDimension = transformOperation2.getDimension(), angle = _transformOperation2_getDimension.angle, width = _transformOperation2_getDimension.width, height = _transformOperation2_getDimension.height;
+    var handleBackground = function(value) {
+        return value ? MainElements_styles_default.buttonBackgroundDown : MainElements_styles_default.buttonBackground;
+    };
+    useEffect11(function() {
+        var controller = new AbortController();
+        var handler = function() {
+            settopLeft(false);
+            settopRight(false);
+            setbottomLeft(false);
+            setbottomRight(false);
+        };
+        window.addEventListener("mousemove", function() {
+            triggierReRender(function(prev) {
+                return !prev;
+            });
+        }, {
+            signal: controller.signal
+        });
+        window.addEventListener("touchmove", function() {
+            triggierReRender(function(prev) {
+                return !prev;
+            });
+        }, {
+            signal: controller.signal
+        });
+        window.addEventListener("mouseup", function() {
+            handler();
+        }, {
+            signal: controller.signal
+        });
+        window.addEventListener("touchend", function() {
+            handler();
+        }, {
+            signal: controller.signal
+        });
+        return function() {
+            controller.abort();
+        };
+    }, [
+        reRender
+    ]);
+    return /* @__PURE__ */ jsxs15("div", {
+        ref: refs.container,
+        style: MainElements_styles_default.container,
+        children: [
+            /* @__PURE__ */ jsx20("div", {
+                ref: refs.frame,
+                style: MainElements_styles_default.frame,
+                children: /* @__PURE__ */ jsx20("img", {
+                    src: originalSrc,
+                    style: MainElements_styles_default.img,
+                    ref: imgRefs.img
+                })
+            }),
+            /* @__PURE__ */ jsxs15("div", {
+                style: MainElements_styles_default.controller,
+                ref: refs.controller,
+                onMouseDown: function(e) {
+                    return mouseEvent.drag(e);
+                },
+                onTouchStart: function(e) {
+                    return touchEvent.drag(e);
+                },
+                children: [
+                    /* @__PURE__ */ jsx20("div", {
+                        ref: refs.topLeft,
+                        style: topLeft ? _object_spread({}, MainElements_styles_default.topLeft, MainElements_styles_default.resizeDown) : MainElements_styles_default.topLeft,
+                        onMouseDown: function(e) {
+                            settopLeft(true);
+                            mouseEvent.resize(e, {
+                                topLeft: true
+                            });
+                        },
+                        onTouchStart: function(e) {
+                            settopLeft(true);
+                            touchEvent.resize(e, {
+                                topLeft: true
+                            });
+                        },
+                        children: /* @__PURE__ */ jsx20("div", {
+                            style: handleBackground(topLeft)
+                        })
+                    }),
+                    /* @__PURE__ */ jsx20("div", {
+                        ref: refs.topRight,
+                        style: topRight ? _object_spread({}, MainElements_styles_default.topRight, MainElements_styles_default.resizeDown) : MainElements_styles_default.topRight,
+                        onMouseDown: function(e) {
+                            settopRight(true);
+                            mouseEvent.resize(e, {
+                                topRight: true
+                            });
+                        },
+                        onTouchStart: function(e) {
+                            settopRight(true);
+                            touchEvent.resize(e, {
+                                topRight: true
+                            });
+                        },
+                        children: /* @__PURE__ */ jsx20("div", {
+                            style: handleBackground(topRight)
+                        })
+                    }),
+                    /* @__PURE__ */ jsx20("div", {
+                        ref: refs.bottomLeft,
+                        style: bottomLeft ? _object_spread({}, MainElements_styles_default.bottomLeft, MainElements_styles_default.resizeDown) : MainElements_styles_default.bottomLeft,
+                        onMouseDown: function(e) {
+                            setbottomLeft(true);
+                            mouseEvent.resize(e, {
+                                bottomLeft: true
+                            });
+                        },
+                        onTouchStart: function(e) {
+                            setbottomLeft(true);
+                            touchEvent.resize(e, {
+                                bottomLeft: true
+                            });
+                        },
+                        children: /* @__PURE__ */ jsx20("div", {
+                            style: handleBackground(bottomLeft)
+                        })
+                    }),
+                    /* @__PURE__ */ jsx20("div", {
+                        ref: refs.bottomRight,
+                        style: bottomRight ? _object_spread({}, MainElements_styles_default.bottomRight, MainElements_styles_default.resizeDown) : MainElements_styles_default.bottomRight,
+                        onMouseDown: function(e) {
+                            setbottomRight(true);
+                            mouseEvent.resize(e, {
+                                bottomRight: true
+                            });
+                        },
+                        onTouchStart: function(e) {
+                            setbottomRight(true);
+                            touchEvent.resize(e, {
+                                bottomRight: true
+                            });
+                        },
+                        children: /* @__PURE__ */ jsx20("div", {
+                            style: handleBackground(bottomRight)
+                        })
+                    }),
+                    /* @__PURE__ */ jsx20(Rotate_default, {}),
+                    (topLeft || topRight || bottomLeft || bottomRight) && /* @__PURE__ */ jsxs15("p", {
+                        style: _object_spread_props(_object_spread({}, MainElements_styles_default.label), {
+                            rotate: "".concat(-angle.toFixed(0), "deg")
+                        }),
+                        children: [
+                            "w: ",
+                            width.toFixed(0),
+                            "px, h: ",
+                            height.toFixed(0),
+                            "px"
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+var MainElements_default = MainElements;
+// src/components/Image/ImageEditor/Instruction.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var Instruction = function() {
+    return /* @__PURE__ */ jsx21("p", {
+        style: ImageEditor_styles_default.instruction,
+        children: "Drag, Zoom, or Rotate image"
+    });
+};
+var Instruction_default = Instruction;
+// src/utilities/Transform/TransformOperationExtension.ts
+var TransformOperationExtension = /*#__PURE__*/ function() {
+    "use strict";
+    function TransformOperationExtension() {
+        _class_call_check(this, TransformOperationExtension);
+        this.xOrigin = 0;
+        this.yOrigin = 0;
+        this.wOrigin = 0;
+        this.hOrigin = 0;
+        this.isSideEffect = false;
+        this.sideEffectList = [];
+    }
+    _create_class(TransformOperationExtension, [
+        {
+            key: "subscribeSideEffect",
+            value: function subscribeSideEffect(element) {
+                this.sideEffectList.push(element);
+            }
+        },
+        {
+            key: "runSideEffectHandler",
+            value: function runSideEffectHandler() {
+                this.sideEffectList.forEach(function(element) {
+                    element.runSideEffectHandler();
+                });
+            }
+        },
+        {
+            key: "setSideEffectState",
+            value: function setSideEffectState() {
+                var value = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+                this.isSideEffect = value;
+            }
+        },
+        {
+            key: "getSideEffectState",
+            value: function getSideEffectState() {
+                return this.isSideEffect;
+            }
+        },
+        {
+            key: "setOrigin",
+            value: function setOrigin(param) {
+                var x = param.x, y = param.y, width = param.width, height = param.height;
+                this.xOrigin = x;
+                this.yOrigin = y;
+                this.wOrigin = width;
+                this.hOrigin = height;
+            }
+        },
+        {
+            key: "getOrigin",
+            value: function getOrigin() {
+                return {
+                    x: this.xOrigin,
+                    y: this.yOrigin,
+                    width: this.wOrigin,
+                    height: this.hOrigin
+                };
+            }
+        }
+    ]);
+    return TransformOperationExtension;
+}();
+// src/utilities/Transform/TransformOperation.ts
+var TransformOperation = /*#__PURE__*/ function(TransformOperationExtension) {
+    "use strict";
+    _inherits(TransformOperation, TransformOperationExtension);
+    function TransformOperation() {
+        _class_call_check(this, TransformOperation);
+        var _this;
+        _this = _call_super(this, TransformOperation, arguments);
+        _this.list = [];
+        _this.x = 0;
+        _this.y = 0;
+        _this.angle = 0;
+        _this.width = 0;
+        _this.height = 0;
+        return _this;
+    }
+    _create_class(TransformOperation, [
+        {
+            key: "setPosition",
+            value: function setPosition(position) {
+                this.list.forEach(function(element) {
+                    element.setPosition(position);
+                });
+            }
+        },
+        {
+            key: "addEventListener",
+            value: function addEventListener(type, listener, options) {
+                this.list[0].addEventListener(type, listener, options);
+            }
+        },
+        {
+            key: "setDimension",
+            value: function setDimension(param) {
+                var x = param.x, y = param.y, angle = param.angle, width = param.width, height = param.height;
+                this.x = x !== void 0 ? x : this.x;
+                this.y = y !== void 0 ? y : this.y;
+                this.angle = angle !== void 0 ? angle : this.angle;
+                this.width = width !== void 0 ? width : this.width;
+                this.height = height !== void 0 ? height : this.height;
+                this.drag(x, y);
+                this.rotate(angle);
+                this.resize(width, height);
+            }
+        },
+        {
+            key: "getDimension",
+            value: function getDimension() {
+                return {
+                    x: this.x,
+                    y: this.y,
+                    angle: this.angle,
+                    width: this.width,
+                    height: this.height,
+                    ratio: this.width / this.height
+                };
+            }
+        },
+        {
+            /**
+   * Register an HTML Element to the TransformOperation
+   * @param element
+   */ key: "subscribe",
+            value: function subscribe(element) {
+                this.list.push(element);
+            }
+        },
+        {
+            key: "drag",
+            value: function drag(x, y) {
+                this.list.forEach(function(element) {
+                    element.drag(x, y);
+                });
+            }
+        },
+        {
+            key: "rotate",
+            value: function rotate(angle) {
+                this.list.forEach(function(element) {
+                    element.rotate(angle);
+                });
+            }
+        },
+        {
+            key: "resize",
+            value: function resize(width, height) {
+                this.list.forEach(function(element) {
+                    element.resize(width, height);
+                });
+            }
+        }
+    ]);
+    return TransformOperation;
+}(TransformOperationExtension);
+var TransformOperation_default = TransformOperation;
+// src/components/Image/ImageEditor/ImageEditor.tsx
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var transformOperation = new TransformOperation_default();
+var ImageEditor = function(param) {
+    var src = param.src, _param_setSrc = param.setSrc, setSrc = _param_setSrc === void 0 ? function() {} : _param_setSrc, _param_isOpen = param.isOpen, isOpen = _param_isOpen === void 0 ? false : _param_isOpen, _param_setOpen = param.setOpen, setOpen = _param_setOpen === void 0 ? function() {} : _param_setOpen, _param_isNew = param.isNew, isNew = _param_isNew === void 0 ? false : _param_isNew;
+    var createTransform = function createTransform() {
+        if (!frame.current || !img.current) return;
+        var transform2 = new Transform({
+            container: container.current,
+            frame: frame.current,
+            img: img.current,
+            controller: controller.current,
+            topLeft: topLeft.current,
+            topRight: topRight.current,
+            bottomLeft: bottomLeft.current,
+            bottomRight: bottomRight.current,
+            rotate: rotate.current,
+            transformOperation: transformOperation
+        });
+        transform2.initialize();
+        if (transformState.current) {
+            transform2.setState(transformState.current);
+        } else {
+            transform2.reset();
+        }
+        setTransform(transform2);
+    };
+    var handleCanvasToSrc = function handleCanvasToSrc() {
+        if (!frame.current || !img.current || !transform) return;
+        var canvas = new Canvas(700, 700);
+        var _transform_getState = transform.getState(), x = _transform_getState.x, y = _transform_getState.y, angle = _transform_getState.angle, width = _transform_getState.width, height = _transform_getState.height;
+        var _transformOperation_getOrigin = transformOperation.getOrigin(), containerWidth = _transformOperation_getOrigin.width, containerHeight = _transformOperation_getOrigin.height;
+        transformState.current = transform.getState();
+        canvas.drawImage({
+            e: img.current,
+            x: x,
+            y: y,
+            angle: angle,
+            width: width,
+            height: height,
+            containerHeight: containerHeight,
+            containerWidth: containerWidth
+        });
+        var _canvas_get = canvas.get(), src2 = _canvas_get.src;
+        return src2;
+    };
+    var handleAccept = function handleAccept() {
+        setSrc(handleCanvasToSrc());
+        setOpen(false);
+    };
+    var handleCancel = function handleCancel() {
+        setOpen(false);
+    };
+    var handleReset = function handleReset() {
+        if (!transform) return;
+        transform.reset();
+    };
+    var handleWindowScroll = function handleWindowScroll(isOpen2) {
+        document.body.style.overflow = isOpen2 ? "hidden" : "auto";
+    };
+    var container = useRef10(null);
+    var frame = useRef10(null);
+    var img = useRef10(null);
+    var controller = useRef10(null);
+    var topLeft = useRef10(null);
+    var topRight = useRef10(null);
+    var bottomLeft = useRef10(null);
+    var bottomRight = useRef10(null);
+    var rotate = useRef10(null);
+    var rotateBottom = useRef10(null);
+    var _useState13 = _sliced_to_array(useState13(void 0), 2), transform = _useState13[0], setTransform = _useState13[1];
+    var transformState = useRef10(void 0);
+    var originalSrc = useMemo(function() {
+        transformState.current = void 0;
+        return src;
+    }, [
+        isNew
+    ]);
+    useEffect12(function() {
+        isOpen ? createTransform() : setTransform(void 0);
+        handleWindowScroll(isOpen);
+        return function() {
+            setTransform(void 0);
+        };
+    }, [
+        isOpen
+    ]);
+    if (!isOpen) return;
+    return /* @__PURE__ */ jsx22(MyContext3.Provider, {
+        value: {
+            refs: {
+                container: container,
+                frame: frame,
+                controller: controller,
+                topLeft: topLeft,
+                topRight: topRight,
+                bottomLeft: bottomLeft,
+                bottomRight: bottomRight,
+                rotate: rotate,
+                rotateBottom: rotateBottom
+            },
+            imgRefs: {
+                img: img
+            },
+            src: originalSrc,
+            transformOperation: transformOperation
+        },
+        children: /* @__PURE__ */ jsxs16("div", {
+            style: ImageEditor_styles_default.imageEditor,
+            children: [
+                /* @__PURE__ */ jsx22(Instruction_default, {}),
+                /* @__PURE__ */ jsx22(MainElements_default, {}),
+                /* @__PURE__ */ jsxs16("div", {
+                    style: ImageEditor_styles_default.buttons,
+                    children: [
+                        /* @__PURE__ */ jsx22(Button_default, {
+                            buttonType: "solid",
+                            content: "Accept",
+                            onClick: handleAccept
+                        }),
+                        /* @__PURE__ */ jsx22(Button_default, {
+                            buttonType: "solid",
+                            content: "Cancel",
+                            onClick: handleCancel
+                        }),
+                        /* @__PURE__ */ jsx22(Button_default, {
+                            buttonType: "solid",
+                            content: "Reset",
+                            onClick: handleReset
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+var ImageEditor_default = ImageEditor;
+// src/utilities/canvas/Canvas.ts
+var Canvas = /*#__PURE__*/ function() {
+    "use strict";
+    function Canvas(width, height) {
+        _class_call_check(this, Canvas);
+        this.canvas = document.createElement("canvas");
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.canvas2DContext = this.canvas.getContext("2d");
+    }
+    _create_class(Canvas, [
+        {
+            key: "get",
+            value: function get() {
+                return {
+                    canvas: this.canvas,
+                    context: this.canvas2DContext,
+                    src: this.src
+                };
+            }
+        },
+        {
+            key: "drawImage",
+            value: function drawImage(param) {
+                var e = param.e, x = param.x, y = param.y, angle = param.angle, width = param.width, height = param.height, containerHeight = param.containerHeight, containerWidth = param.containerWidth;
+                var ratioX = this.canvas.width / containerWidth;
+                var ratioY = this.canvas.height / containerHeight;
+                var finalX = x * ratioX;
+                var finalY = y * ratioY;
+                var finalWidth = width * ratioX;
+                var finalHeight = height * ratioY;
+                var angleRadians = angle * Math.PI / 180;
+                var reverse_p = LinearAlgebra_default.rotateVector([
+                    finalX,
+                    finalY,
+                    1
+                ], -angleRadians);
+                var reverse_q = LinearAlgebra_default.rotateVector([
+                    finalX + finalWidth,
+                    finalY + finalHeight,
+                    1
+                ], -angleRadians);
+                var reverse_p_prime = LinearAlgebra_default.NicolasMattia(reverse_p, LinearAlgebra_default.getMiddleVectorFrom(reverse_p, reverse_q), angleRadians);
+                this.canvas2DContext.save();
+                this.canvas2DContext.rotate(angleRadians);
+                this.canvas2DContext.drawImage(e, reverse_p_prime[0], reverse_p_prime[1], finalWidth, finalHeight);
+                this.src = this.canvas2DContext.canvas.toDataURL();
+                this.canvas2DContext.restore();
+            }
+        },
+        {
+            key: "drawColor",
+            value: function drawColor(type, color, width, ratio) {
+                if (type === "") color = "#ffffff";
+                if (type === "gradient") {
+                    var breakdownArr = color.split(",");
+                    var _ref = [
+                        Number(breakdownArr[0]),
+                        breakdownArr[1],
+                        Number(breakdownArr[2]),
+                        breakdownArr[3],
+                        Number(breakdownArr[4])
+                    ], angle = _ref[0], color1 = _ref[1], percent1 = _ref[2], color2 = _ref[3], percent2 = _ref[4];
+                    var radians = (angle - 180) * Math.PI / 180;
+                    var x0 = width / 2 + width / 2 * Math.cos(radians - Math.PI / 2);
+                    var y0 = width * ratio / 2 + width * ratio / 2 * Math.sin(radians - Math.PI / 2);
+                    var x1 = width / 2 - width / 2 * Math.cos(radians - Math.PI / 2);
+                    var y1 = width * ratio / 2 - width * ratio / 2 * Math.sin(radians - Math.PI / 2);
+                    var gradient = this.canvas2DContext.createLinearGradient(x0, y0, x1, y1);
+                    gradient.addColorStop(percent1 / 100, color1);
+                    gradient.addColorStop(percent2 / 100, color2);
+                    this.canvas2DContext.fillStyle = gradient;
+                    this.canvas2DContext.fillRect(0, 0, width, width * ratio);
+                    this.src = this.canvas2DContext.canvas.toDataURL();
+                } else {
+                    this.canvas2DContext.fillStyle = color;
+                    this.canvas2DContext.fillRect(0, 0, this.canvas2DContext.canvas.width, this.canvas2DContext.canvas.height);
+                    this.src = this.canvas2DContext.canvas.toDataURL();
+                }
+            }
+        }
+    ]);
+    return Canvas;
+}();
+// src/utilities/canvas/Image.ts
+var Image2 = {
+    /**
+   * Convert file (blob) to base64 string format
+   * @param file
+   * @returns
+   */ FromFileToImageSrc: function FromFileToImageSrc(file) {
+        return new Promise(function(resolve, reject) {
+            if (!file) return resolve(null);
+            var reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = function(readerEvent) {
+                var _readerEvent_target;
+                if ((_readerEvent_target = readerEvent.target) === null || _readerEvent_target === void 0 ? void 0 : _readerEvent_target.result) {
+                    var _readerEvent_target1;
+                    return resolve((_readerEvent_target1 = readerEvent.target) === null || _readerEvent_target1 === void 0 ? void 0 : _readerEvent_target1.result);
+                }
+                reject("Error getting the image source");
+            };
+            reader.onerror = function() {
+                reject("Error getting the image source");
+            };
+        });
+    },
+    FromStringToImageSrc: /**
+   * Take a url, look for the corresponding image file, and convert it to base64 format
    * @param url
    * @returns
    */ function FromStringToImageSrc(url) {
@@ -2434,466 +3442,187 @@ var Image2 = {
     }
 };
 var Image_default2 = Image2;
-// src/utilities/Transform/Transform.ts
-import $2 from "jquery";
-// src/utilities/Transform/TransformController.ts
-import $ from "jquery";
-import { icon } from "@fortawesome/fontawesome-svg-core";
-import { faRotate, faTrash } from "@fortawesome/free-solid-svg-icons";
-var TransformController = /*#__PURE__*/ function() {
+// src/utilities/Transform/WElement.ts
+var WElement = /*#__PURE__*/ function() {
     "use strict";
-    function TransformController(wrapper, frame, controller) {
-        _class_call_check(this, TransformController);
-        this.wrapper = wrapper;
-        this.frame = frame;
-        this.controller = controller;
+    function WElement(element, sideEffectCallback) {
+        _class_call_check(this, WElement);
+        this.element = element;
+        this.sideEffectCallback = sideEffectCallback;
     }
-    _create_class(TransformController, [
+    _create_class(WElement, [
         {
-            key: "addController",
-            value: function addController() {
-                var _this = this;
-                return new Promise(function(res) {
-                    var styleElement = document.createElement("style");
-                    styleElement.textContent = _this.css();
-                    document.head.appendChild(styleElement);
-                    $("." + _this.frame).after(_this.controllerTemplate());
-                    res();
-                });
+            key: "runSideEffectHandler",
+            value: function runSideEffectHandler() {
+                if (!this.sideEffectCallback) return;
+                this.sideEffectCallback(this.element);
             }
         },
         {
-            key: "css",
-            value: function css() {
-                return "\n        .".concat(this.wrapper, " {\n            position: absolute;\n            transform-origin: top left;\n            user-select: none;\n        }\n        .").concat(this.wrapper, " > img {\n            object-fit: contain;\n            position: absolute;\n            top: 0;\n            left: 0;\n            display: block;\n            z-index: 1;\n            transform: translate(-50%, -50%)\n        }\n        .").concat(this.controller, "--container {\n            position: absolute;\n            transform-origin: top left;\n            user-select: none;\n        }\n        .").concat(this.controller, " {\n            position: absolute;\n            user-select: none;\n            border: solid 3px #6924d5;\n            z-index: 1;\n            top: 0;\n            left: 0;\n            transform: translate(-50%, -50%);\n        }\n        .").concat(this.controller, " .resize {\n            background-color: #fff;\n            width: 20px;\n            height: 20px;\n            border-radius: 50%;\n            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n            transition: all .1s linear;\n        }\n        .").concat(this.controller, " .resize.show {\n            background-color: #6924d5;\n        }\n        .").concat(this.controller, " .resize > .circle {\n            background-color: #f0f0f0a8;\n            position: absolute;\n            top: -15px;\n            left: -15px;\n            width: 50px;\n            height: 50px;\n            border-radius: 50%;\n            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n            z-index: -1;\n            visibility: hidden;\n            transition: all .1s linear;\n        }\n        .").concat(this.controller, " .resize > .circle.show {\n            visibility: visible;\n        }\n        .").concat(this.controller, " .resize.resize-topleft {\n            position: absolute;\n            top: -10px;\n            left: -10px;\n        }\n        .").concat(this.controller, " .resize.resize-topright {\n            position: absolute;\n            top: -10px;\n            right: -10px;\n        }\n        .").concat(this.controller, " .resize.resize-bottomleft {\n            position: absolute;\n            bottom: -10px;\n            left: -10px;\n        }\n        .").concat(this.controller, " .resize.resize-bottomright {\n            position: absolute;\n            bottom: -10px;\n            right: -10px;\n        }\n        .").concat(this.controller, " .rotate {\n            position: absolute;\n            top: -50px;\n            left: calc(50% - 15px);\n            width: 30px;\n            height: 30px;\n            background-color: #fff;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n        .").concat(this.controller, " .delete {\n            position: absolute;\n            bottom: -50px;\n            left: calc(50% + 40px);\n            width: 30px;\n            height: 30px;\n            background-color: #fff;\n            border-radius: 50%;\n            display: none;\n            justify-content: center;\n            align-items: center;\n        }\n    ");
+            key: "addEventListener",
+            value: function addEventListener(type, listener, options) {
+                this.element.addEventListener(type, listener, options);
             }
         },
         {
-            key: "controllerTemplate",
-            value: function controllerTemplate() {
-                return '\n            <div class="'.concat(this.controller, '--container">\n                <div class="').concat(this.controller, '">\n                    <div class="dot resize resize-topleft"><div class="circle"></div></div>\n                    <div class="dot resize resize-topright"><div class="circle"></div></div>\n                    <div class="dot resize resize-bottomleft"><div class="circle"></div></div>\n                    <div class="dot resize resize-bottomright"><div class="circle"></div></div>\n                    <div class="dot rotate">').concat(icon(faRotate).html[0], '</div>\n                    <div class="dot rotate shadow" style="visibility: hidden;">').concat(icon(faRotate).html[0], '</div>\n                    <div class="dot delete">').concat(icon(faTrash).html[0], '</div>\n                    <div class="dot delete shadow" style="visibility: hidden;">').concat(icon(faTrash).html[0], "</div>\n                </div>\n            </div>\n            ");
+            key: "drag",
+            value: function drag(x, y) {
+                this.element.style.left = x !== void 0 ? (x - this.element.clientLeft).toString() + "px" : this.element.style.left;
+                this.element.style.top = y !== void 0 ? (y - this.element.clientTop).toString() + "px" : this.element.style.top;
             }
-        }
-    ]);
-    return TransformController;
-}();
-// src/utilities/Transform/Transform.ts
-var Transform = /*#__PURE__*/ function() {
-    "use strict";
-    function Transform(ele1, ele2, ele3) {
-        _class_call_check(this, Transform);
-        this.ele1 = ele1;
-        this.ele2 = ele2;
-        this.x = 0;
-        this.y = 0;
-        this.angle = 90;
-        this.w = 0;
-        this.h = 0;
-        if (this.ele1 === null) {
-            throw new Error("wrapper elemenet is not defined or not rendered yet");
-        }
-        this.wrapperClass = "_" + (Date.now() + 5e3).toString();
-        $2(this.ele1).addClass(this.wrapperClass);
-        this.imgFrame = this.ele2;
-        if (this.imgFrame === null) {
-            throw new Error("frame element is not defined or not rendered yet");
-        }
-        this.frameClass = "_" + (Date.now() - 5e3).toString();
-        $2(this.ele2).addClass(this.frameClass);
-        this.img = this.ele1.querySelector("img");
-        if (this.img === null) {
-            throw new Error("image element is not defined or not rendered yet");
-        }
-        this.ratio = this.img.clientWidth / this.img.clientHeight;
-        this.controllerClassName = "_" + Date.now().toString();
-        this.isRotateOffScreen = false;
-    }
-    _create_class(Transform, [
+        },
         {
-            key: "initialize",
-            value: function initialize() {
-                return _async_to_generator(function() {
-                    var transformController;
-                    return _ts_generator(this, function(_state) {
-                        switch(_state.label){
-                            case 0:
-                                transformController = new TransformController(this.wrapperClass, this.frameClass, this.controllerClassName);
-                                return [
-                                    4,
-                                    transformController.addController()
-                                ];
-                            case 1:
-                                _state.sent();
-                                this.controllerContainer = document.querySelector("." + this.controllerClassName + "--container");
-                                this.controller = document.querySelector("." + this.controllerClassName);
-                                this.handleElementGoOffScreen("." + this.controllerClassName + " .rotate", "." + this.controllerClassName + " .rotate.shadow", "rotate").handleElementGoOffScreen("." + this.controllerClassName + " .delete", "." + this.controllerClassName + " .delete.shadow", "delete").transform();
-                                return [
-                                    2
-                                ];
-                        }
-                    });
-                }).call(this);
+            key: "rotate",
+            value: function rotate(angle) {
+                this.element.style.rotate = angle !== void 0 ? angle + "deg" : this.element.style.rotate;
             }
         },
         {
-            key: "reset",
-            value: function reset() {
-                this.setState({
-                    x: 0,
-                    y: this.imgFrame.clientHeight / 2 - this.img.height / 2,
-                    angle: 0,
-                    w: this.imgFrame.clientWidth
-                });
+            key: "resize",
+            value: function resize(width, height) {
+                this.element.style.width = width !== void 0 ? width + "px" : this.element.style.width;
+                this.element.style.height = height !== void 0 ? height + "px" : this.element.style.height;
             }
         },
         {
-            key: "setState",
-            value: function setState(param) {
-                var x = param.x, y = param.y, angle = param.angle, w = param.w;
-                this.repositionElement(x + this.imgFrame.clientWidth / 2, y + this.img.height / 2);
-                this.rotateBox(angle);
-                this.resize(w, w / this.ratio);
-                this.setValue(x, y, angle, w, w / this.ratio);
+            key: "setPosition",
+            value: function setPosition(position) {
+                this.element.style.setProperty("position", position, "important");
             }
         },
         {
-            key: "setValue",
-            value: function setValue(x, y, angle, w, h) {
-                this.x = x !== void 0 ? x : this.x;
-                this.y = y !== void 0 ? y : this.y;
-                this.angle = angle !== void 0 ? angle : this.angle;
-                this.w = w !== void 0 ? w : this.w;
-                this.h = h !== void 0 ? h : this.h;
+            key: "setDimension",
+            value: function setDimension(param) {
+                var x = param.x, y = param.y, angle = param.angle, width = param.width, height = param.height;
+                this.drag(x, y);
+                this.rotate(angle);
+                this.resize(width, height);
             }
         },
         {
-            key: "exportData",
-            value: function exportData() {
+            key: "getDimension",
+            value: function getDimension() {
                 return {
-                    x: this.x,
-                    y: this.y,
-                    angle: this.angle,
-                    w: this.w,
-                    h: this.h
+                    x: this.element.offsetLeft,
+                    y: this.element.offsetTop,
+                    angle: this.getCurrentRotation(),
+                    width: this.element.clientWidth,
+                    height: this.element.clientHeight,
+                    ratio: this.element.clientWidth / this.element.clientHeight
                 };
             }
         },
         {
-            key: "repositionElement",
-            value: function repositionElement(x, y) {
-                var controllerWrapper = this.controllerContainer;
-                var boxWrapper = this.ele1;
-                boxWrapper.style.left = x + "px";
-                boxWrapper.style.top = y + "px";
-                controllerWrapper.style.left = x + this.imgFrame.offsetLeft + 3 + "px";
-                controllerWrapper.style.top = y + this.imgFrame.offsetTop + 3 + "px";
+            /**
+   * Get current angle of current element in degrees
+   * @returns angle in degrees
+   */ key: "getCurrentRotation",
+            value: function getCurrentRotation() {
+                if (!this.element) return 0;
+                var st = window.getComputedStyle(this.element, null);
+                var tm = st.getPropertyValue("-webkit-transform") || st.getPropertyValue("-moz-transform") || st.getPropertyValue("-ms-transform") || st.getPropertyValue("-o-transform") || st.getPropertyValue("transform");
+                "none";
+                if (tm != "none") {
+                    var values = tm.split("(")[1].split(")")[0].split(",");
+                    var angle = Math.round(Math.atan2(Number(values[1]), Number(values[0])) * (180 / Math.PI));
+                    return angle < 0 ? angle + 360 : angle;
+                }
+                return 0;
             }
-        },
+        }
+    ]);
+    return WElement;
+}();
+var WElement_default = WElement;
+// src/utilities/Transform/Transform.ts
+var Transform = /*#__PURE__*/ function() {
+    "use strict";
+    function Transform(param) {
+        var container = param.container, frame = param.frame, img = param.img, controller = param.controller, topLeft = param.topLeft, topRight = param.topRight, bottomLeft = param.bottomLeft, bottomRight = param.bottomRight, rotate = param.rotate, transformOperation2 = param.transformOperation;
+        _class_call_check(this, Transform);
+        this.frame = new WElement_default(frame);
+        this.img = new WElement_default(img);
+        this.container = new WElement_default(container);
+        this.controller = new WElement_default(controller);
+        this.topLeft = new WElement_default(topLeft);
+        this.topRight = new WElement_default(topRight);
+        this.bottomLeft = new WElement_default(bottomLeft);
+        this.bottomRight = new WElement_default(bottomRight);
+        this.rotate = new WElement_default(rotate, function(element) {
+            var rotateBottom = element.nextElementSibling;
+            var callback = function(entries) {
+                entries.forEach(function(entry) {
+                    if (!entry.isIntersecting) {
+                        element.style.visibility = "hidden";
+                        rotateBottom.style.display = "flex";
+                    } else {
+                        element.style.visibility = "visible";
+                        rotateBottom.style.display = "none";
+                    }
+                });
+            };
+            var observer = new IntersectionObserver(callback, {
+                root: null,
+                rootMargin: "0px",
+                threshold: 0.1
+            });
+            observer.observe(element);
+        });
+        this.transformOperation = transformOperation2;
+    }
+    _create_class(Transform, [
         {
-            key: "resize",
-            value: function resize(w, h) {
-                var controller = this.controller;
-                var img = this.img;
-                var wrapper = this.ele1;
-                controller.style.width = w + "px";
-                controller.style.height = h + "px";
-                img.style.width = w + "px";
-                wrapper.style.width = w + "px";
+            key: "initialize",
+            value: function initialize() {
+                this.container.setPosition("relative");
+                this.controller.setPosition("absolute");
+                this.frame.setPosition("relative");
+                this.img.setPosition("absolute");
+                var _this_container_getDimension = this.container.getDimension(), x = _this_container_getDimension.x, y = _this_container_getDimension.y, width = _this_container_getDimension.width, height = _this_container_getDimension.height;
+                this.transformOperation.setOrigin({
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height
+                });
+                this.transformOperation.subscribe(this.controller);
+                this.transformOperation.subscribe(this.img);
+                this.transformOperation.subscribeSideEffect(this.rotate);
+                this.transformOperation.runSideEffectHandler();
+                return this;
             }
         },
         {
-            key: "rotateBox",
-            value: function rotateBox(deg) {
-                var controllerWrapper = this.controllerContainer;
-                var boxWrapper = this.ele1;
-                boxWrapper.style.transform = "rotate(".concat(deg, "deg)");
-                controllerWrapper.style.rotate = "".concat(deg, "deg");
+            key: "setState",
+            value: function setState(param) {
+                var x = param.x, y = param.y, angle = param.angle, width = param.width, height = param.height;
+                this.transformOperation.setDimension({
+                    x: x,
+                    y: y,
+                    angle: angle,
+                    width: width,
+                    height: height
+                });
             }
         },
         {
-            key: "handleElementGoOffScreen",
-            value: function handleElementGoOffScreen(main, shadow, type) {
-                var _this = this;
-                var mainEle = document.querySelector(main);
-                var shadowEle = document.querySelector(shadow);
-                var options = {
-                    root: null,
-                    rootMargin: "0px",
-                    threshold: 0.1
-                };
-                var callback = function(entries) {
-                    entries.forEach(function(entry) {
-                        switch(type){
-                            case "rotate":
-                                if (!entry.isIntersecting) {
-                                    mainEle.style.top = "auto";
-                                    mainEle.style.bottom = "-50px";
-                                    _this.isRotateOffScreen = true;
-                                } else {
-                                    mainEle.style.bottom = "auto";
-                                    mainEle.style.top = "-50px";
-                                    _this.isRotateOffScreen = false;
-                                }
-                                break;
-                            case "delete":
-                                if (!entry.isIntersecting) {
-                                    mainEle.style.bottom = "auto";
-                                    mainEle.style.top = "-50px";
-                                } else {
-                                    mainEle.style.top = "auto";
-                                    mainEle.style.bottom = "-50px";
-                                }
-                                break;
-                        }
-                    });
-                };
-                var observer = new IntersectionObserver(callback, options);
-                observer.observe(shadowEle);
-                return this;
+            key: "getState",
+            value: function getState() {
+                return this.transformOperation.getDimension();
             }
         },
         {
-            key: "transform",
-            value: function transform() {
-                var _this = this;
-                var _this1 = this;
-                var controllerWrapper = this.controllerContainer;
-                var boxWrapper = this.ele1;
-                var minWidth = 40;
-                var minHeight = 40;
-                var initX, initY, mousePressX, mousePressY, initW, initH, initRotate;
-                function getCurrentRotation(el) {
-                    var st = window.getComputedStyle(el, null);
-                    var tm = st.getPropertyValue("-webkit-transform") || st.getPropertyValue("-moz-transform") || st.getPropertyValue("-ms-transform") || st.getPropertyValue("-o-transform") || st.getPropertyValue("transform");
-                    "none";
-                    if (tm != "none") {
-                        var values = tm.split("(")[1].split(")")[0].split(",");
-                        var angle = Math.round(Math.atan2(Number(values[1]), Number(values[0])) * (180 / Math.PI));
-                        return angle < 0 ? angle + 360 : angle;
-                    }
-                    return 0;
-                }
-                function mousedownCb(event) {
-                    event.target.classList.add("show");
-                    event.target.querySelector(".circle").classList.add("show");
-                }
-                function mouseupCb(event) {
-                    event.target.classList.remove("show");
-                    event.target.querySelector(".circle").classList.remove("show");
-                }
-                var handleDrag = function(event, type) {
-                    event.stopPropagation();
-                    var initX2 = boxWrapper.offsetLeft;
-                    var initY2 = boxWrapper.offsetTop;
-                    var mousePressX2 = type === "desk" ? event.clientX : event.touches[0].clientX;
-                    var mousePressY2 = type === "desk" ? event.clientY : event.touches[0].clientY;
-                    var _this_exportData = _this.exportData(), w = _this_exportData.w, h = _this_exportData.h;
-                    var eventMoveHandler = function(event2) {
-                        var x = type === "desk" ? event2.clientX : event2.touches[0].clientX;
-                        var y = type === "desk" ? event2.clientY : event2.touches[0].clientY;
-                        var posX = initX2 + (x - mousePressX2);
-                        var posY = initY2 + (y - mousePressY2);
-                        _this.repositionElement(posX, posY);
-                        _this.setValue(posX - w / 2, posY - h / 2, void 0, void 0, void 0);
-                    };
-                    if (type === "desk") {
-                        controllerWrapper.addEventListener("mousemove", eventMoveHandler, false);
-                        window.addEventListener("mouseup", function eventEndHandler() {
-                            controllerWrapper.removeEventListener("mousemove", eventMoveHandler, false);
-                            window.removeEventListener("mouseup", eventEndHandler);
-                        }, false);
-                    } else {
-                        controllerWrapper.addEventListener("touchmove", eventMoveHandler, {
-                            passive: true
-                        });
-                        window.addEventListener("touchend", function eventEndHandler() {
-                            controllerWrapper.removeEventListener("touchmove", eventMoveHandler);
-                            window.removeEventListener("touchend", eventEndHandler);
-                        }, false);
-                    }
-                };
-                controllerWrapper.addEventListener("mousedown", function(e) {
-                    return handleDrag(e, "desk");
-                }, false);
-                controllerWrapper.addEventListener("touchstart", function(e) {
-                    return handleDrag(e, "touch");
-                }, {
-                    passive: true
-                });
-                var leftTop = document.querySelector("." + this.controllerClassName + " .resize-topleft");
-                var rightTop = document.querySelector("." + this.controllerClassName + " .resize-topright");
-                var rightBottom = document.querySelector("." + this.controllerClassName + " .resize-bottomright");
-                var leftBottom = document.querySelector("." + this.controllerClassName + " .resize-bottomleft");
-                var resizeHandler = function(event) {
-                    var left = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, top = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false, xResize = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, yResize = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false, type = arguments.length > 5 ? arguments[5] : void 0;
-                    event.stopPropagation();
-                    initX = boxWrapper.offsetLeft;
-                    initY = boxWrapper.offsetTop;
-                    mousePressX = type === "desk" ? event.clientX : event.touches[0].clientX;
-                    mousePressY = type === "desk" ? event.clientY : event.touches[0].clientY;
-                    initW = _this1.img.offsetWidth;
-                    initH = _this1.img.offsetHeight;
-                    initRotate = getCurrentRotation(boxWrapper);
-                    var initRadians = initRotate * Math.PI / 180;
-                    var cosFraction = Math.cos(initRadians);
-                    var sinFraction = Math.sin(initRadians);
-                    mousedownCb(event);
-                    var vectorC = [
-                        mousePressX - initX - _this1.imgFrame.offsetLeft,
-                        mousePressY - initY - _this1.imgFrame.offsetTop
-                    ];
-                    var eventMoveHandler = function(event2) {
-                        var x = type === "desk" ? event2.clientX : event2.touches[0].clientX;
-                        var y = type === "desk" ? event2.clientY : event2.touches[0].clientY;
-                        var wDiff = x - mousePressX;
-                        var hDiff = y - mousePressY;
-                        var vectorD = [
-                            wDiff,
-                            hDiff
-                        ];
-                        var c = (vectorC[0] * vectorD[0] + vectorC[1] * vectorD[1]) / (vectorC[0] * vectorC[0] + vectorC[1] * vectorC[1]);
-                        var vectorH = [
-                            c * vectorC[0],
-                            c * vectorC[1]
-                        ];
-                        var rotatedWDiff = cosFraction * vectorH[0] + sinFraction * vectorH[1];
-                        var rotatedHDiff = cosFraction * vectorH[1] - sinFraction * vectorH[0];
-                        rotatedHDiff = rotatedHDiff * rotatedWDiff > 0 ? rotatedWDiff / _this1.ratio : -rotatedWDiff / _this1.ratio;
-                        var newW = initW, newH = initH, newX = initX, newY = initY;
-                        if (xResize) {
-                            if (left) {
-                                newW = initW - rotatedWDiff;
-                                if (newW < minWidth) {
-                                    newW = minWidth;
-                                    rotatedWDiff = initW - minWidth;
-                                }
-                            } else {
-                                newW = initW + rotatedWDiff;
-                                if (newW < minWidth) {
-                                    newW = minWidth;
-                                    rotatedWDiff = minWidth - initW;
-                                }
-                            }
-                            newX += 0.5 * rotatedWDiff * cosFraction;
-                            newY += 0.5 * rotatedWDiff * sinFraction;
-                        }
-                        if (yResize) {
-                            if (top) {
-                                newH = initH - rotatedHDiff;
-                                if (newH < minHeight) {
-                                    newH = minHeight;
-                                    rotatedHDiff = initH - minHeight;
-                                }
-                            } else {
-                                newH = initH + rotatedHDiff;
-                                if (newH < minHeight) {
-                                    newH = minHeight;
-                                    rotatedHDiff = minHeight - initH;
-                                }
-                            }
-                            newX -= 0.5 * rotatedHDiff * sinFraction;
-                            newY += 0.5 * rotatedHDiff * cosFraction;
-                        }
-                        _this1.resize(newW, newH);
-                        _this1.repositionElement(newX, newY);
-                        _this1.setValue(newX - newW / 2, newY - newH / 2, void 0, newW, newH);
-                    };
-                    if (type === "desk") {
-                        window.addEventListener("mousemove", eventMoveHandler, false);
-                        window.addEventListener("mouseup", function eventEndHandler() {
-                            mouseupCb(event);
-                            window.removeEventListener("mousemove", eventMoveHandler, false);
-                            window.removeEventListener("mouseup", eventEndHandler);
-                        }, false);
-                    } else {
-                        window.addEventListener("touchmove", eventMoveHandler, {
-                            passive: true
-                        });
-                        window.addEventListener("touchend", function eventEndHandler() {
-                            mouseupCb(event);
-                            window.removeEventListener("touchmove", eventMoveHandler, false);
-                            window.removeEventListener("touchend", eventEndHandler);
-                        }, false);
-                    }
-                };
-                leftTop.addEventListener("mousedown", function(e) {
-                    return resizeHandler(e, true, true, true, true, "desk");
-                });
-                rightTop.addEventListener("mousedown", function(e) {
-                    return resizeHandler(e, false, true, true, true, "desk");
-                });
-                rightBottom.addEventListener("mousedown", function(e) {
-                    return resizeHandler(e, false, false, true, true, "desk");
-                });
-                leftBottom.addEventListener("mousedown", function(e) {
-                    return resizeHandler(e, true, false, true, true, "desk");
-                });
-                leftTop.addEventListener("touchstart", function(e) {
-                    return resizeHandler(e, true, true, true, true, "touch");
-                }, {
-                    passive: true
-                });
-                rightTop.addEventListener("touchstart", function(e) {
-                    return resizeHandler(e, false, true, true, true, "touch");
-                }, {
-                    passive: true
-                });
-                rightBottom.addEventListener("touchstart", function(e) {
-                    return resizeHandler(e, false, false, true, true, "touch");
-                }, {
-                    passive: true
-                });
-                leftBottom.addEventListener("touchstart", function(e) {
-                    return resizeHandler(e, true, false, true, true, "touch");
-                }, {
-                    passive: true
-                });
-                var rotate = document.querySelector("." + this.controllerClassName + " .rotate");
-                var handleRotate = function(event, type) {
-                    event.stopPropagation();
-                    initX = event.target.offsetLeft;
-                    initY = event.target.offsetTop;
-                    mousePressX = type === "desk" ? event.clientX : event.touches[0].clientX;
-                    mousePressY = type === "desk" ? event.clientY : event.touches[0].clientY;
-                    var arrow = _this.controller;
-                    var arrowRects = arrow.getBoundingClientRect();
-                    var arrowX = arrowRects.left + arrowRects.width / 2;
-                    var arrowY = arrowRects.top + arrowRects.height / 2;
-                    var compensation = _this.isRotateOffScreen ? 180 : 0;
-                    var eventMoveHandler = function(event2) {
-                        var x = type === "desk" ? event2.clientX : event2.touches[0].clientX;
-                        var y = type === "desk" ? event2.clientY : event2.touches[0].clientY;
-                        var angle = Math.atan2(y - arrowY, x - arrowX) + Math.PI / 2;
-                        angle *= 180 / Math.PI;
-                        angle += compensation;
-                        _this.rotateBox(angle);
-                        _this.setValue(void 0, void 0, angle, void 0, void 0);
-                    };
-                    if (type === "desk") {
-                        window.addEventListener("mousemove", eventMoveHandler, false);
-                        window.addEventListener("mouseup", function eventEndHandler() {
-                            window.removeEventListener("mousemove", eventMoveHandler, false);
-                            window.removeEventListener("mouseup", eventEndHandler);
-                        }, false);
-                    } else {
-                        window.addEventListener("touchmove", eventMoveHandler, {
-                            passive: true
-                        });
-                        window.addEventListener("touchend", function eventEndHandler() {
-                            window.removeEventListener("touchmove", eventMoveHandler, false);
-                            window.removeEventListener("touchend", eventEndHandler);
-                        }, false);
-                    }
-                };
-                rotate.addEventListener("mousedown", function(e) {
-                    return handleRotate(e, "desk");
-                }, false);
-                rotate.addEventListener("touchstart", function(e) {
-                    return handleRotate(e, "touch");
-                }, {
-                    passive: true
+            key: "reset",
+            value: function reset() {
+                var width = this.frame.getDimension().width;
+                var ratio = this.img.getDimension().ratio;
+                this.transformOperation.setDimension({
+                    x: 0,
+                    y: width / 2 - width / ratio / 2,
+                    angle: 0,
+                    width: width,
+                    height: width / ratio
                 });
-                this.reset();
                 return this;
             }
         }
@@ -2950,29 +3679,29 @@ var tools = {
 };
 var tools_default = tools;
 // src/auth/react/context.tsx
-import { createContext as createContext4, useContext as useContext4 } from "react";
-var SessionContext = createContext4(void 0);
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var SessionContext = createContext5(void 0);
 function useSession() {
-    var data = useContext4(SessionContext);
+    var data = useContext5(SessionContext);
     if (data === void 0) throw new Error("Session context is undefined");
     return data;
 }
 // src/auth/react/SessionProvider.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var SessionProvider = function(param) {
     var value = param.value, children = param.children;
-    return /* @__PURE__ */ jsx20(SessionContext.Provider, {
+    return /* @__PURE__ */ jsx23(SessionContext.Provider, {
         value: value,
         children: children
     });
 };
 var SessionProvider_default = SessionProvider;
 // src/auth/react/useAuthClient.ts
-import { useEffect as useEffect11, useRef as useRef11, useState as useState12 } from "react";
+import { useEffect as useEffect13, useRef as useRef11, useState as useState14 } from "react";
 var useAuthClient = function(auth) {
-    var _useState12 = _sliced_to_array(useState12(false), 2), isLoading = _useState12[0], setLoading = _useState12[1];
+    var _useState14 = _sliced_to_array(useState14(false), 2), isLoading = _useState14[0], setLoading = _useState14[1];
     var sessionRef = useRef11(void 0);
-    useEffect11(function() {
+    useEffect13(function() {
         var is = true;
         var getSession = function() {
             return _async_to_generator(function() {
@@ -3013,4 +3742,127 @@ var useAuthClient = function(auth) {
     };
 };
 var useAuthClient_default = useAuthClient;
-export { Avatar_default as Avatar, Button_default as Button, Canvas, ColorPickerSlider_default as ColorPickerSlider, DropdownSelect_default as DropdownSelect, Image_default as Image, ImageEditor_default as ImageEditor, Image_default2 as ImageUtilities, InputFile_default as InputFile, InputGoogle_default as InputGoogle, MultiSelect_default as MultiSelect, OptionSlider_default as OptionSlider, RangeSlider_default as RangeSlider, SessionProvider_default as SessionProvider, TextArea_default as TextArea, Transform, UploadImage_default as UploadImage, tools_default as tools, useAuthClient_default as useAuthClient, useSession };
+// src/utilities/math/LinearAlgebra.ts
+var 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: function translateVector(vector, translateVector) {
+        if (vector.length !== 3) {
+            throw new Error("Vector must be 3 dimension");
+        }
+        return [
+            vector[0] + translateVector[0],
+            vector[1] + translateVector[1],
+            1
+        ];
+    },
+    /**
+   * Rotate a vector by an angle in radian
+   * @param vector
+   * @param angle
+   * @throws Exception if the vector is not in 3 dimension
+   */ rotateVector: function rotateVector(vector, angle) {
+        if (vector.length !== 3) {
+            throw new Error("Vector must be 3 dimension");
+        }
+        return [
+            vector[0] * Math.cos(angle) - vector[1] * Math.sin(angle),
+            vector[0] * Math.sin(angle) + vector[1] * Math.cos(angle),
+            1
+        ];
+    },
+    /**
+   * Get opposite vector
+   * @param vector
+   */ getOppositeVector: function getOppositeVector(vector) {
+        return [
+            -1 * vector[0],
+            -1 * vector[1],
+            1
+        ];
+    },
+    /**
+   * 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: function NicolasMattia(vector, translate, angle) {
+        if (vector.length !== 3) {
+            throw new Error("Vector must be 3 dimension");
+        }
+        var c = LinearAlgebra.translateVector(vector, LinearAlgebra.getOppositeVector(translate));
+        var r = LinearAlgebra.rotateVector(c, angle);
+        return LinearAlgebra.translateVector(r, translate);
+    },
+    /**
+   * Set coofficient for a vector
+   * @param coefficient
+   * @param vector
+   * @throws Exception if the vector is not in 3 dimension
+   */ setCoefficient: function setCoefficient(coefficient, vector) {
+        if (vector.length !== 3) {
+            throw new Error("Vector must be 3 dimension");
+        }
+        return [
+            coefficient * vector[0],
+            coefficient * vector[1],
+            1
+        ];
+    },
+    /**
+   * Plus 2 vectors
+   * @param vector1
+   * @param vector2
+   * @throws Exception if the vector is not in 3 dimension
+   */ plusVectors: function plusVectors(vector1, vector2) {
+        if (vector1.length !== 3 || vector2.length !== 3) {
+            throw new Error("Vector must be 3 dimension");
+        }
+        return [
+            vector1[0] + vector2[0],
+            vector1[1] + vector2[1],
+            1
+        ];
+    },
+    /**
+   * Get middle vector from 2 vectors
+   * @param vector1
+   * @param vector2
+   * @throws Exception if the vector is not in 3 dimension
+   */ getMiddleVectorFrom: function getMiddleVectorFrom(vector1, vector2) {
+        if (vector1.length !== 3 || vector2.length !== 3) {
+            throw new Error("Vector must be 3 dimension");
+        }
+        return LinearAlgebra.plusVectors(LinearAlgebra.setCoefficient(0.5, vector1), LinearAlgebra.setCoefficient(0.5, vector2));
+    },
+    /**
+   * Compute dot products between two vectors
+   * @param vector1
+   * @param vector2
+   * @throws Exception if the vector is not in 3 dimension
+   */ dotProduct: function dotProduct(vector1, vector2) {
+        if (vector1.length !== 3 || vector2.length !== 3) {
+            throw new Error("Vector must be 3 dimension");
+        }
+        return vector1[0] * vector2[0] + vector1[1] * vector2[1];
+    },
+    /**
+   * 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: function getVectorMagnitude(vector) {
+        if (vector.length !== 3) {
+            throw new Error("Vector must be 3 dimension");
+        }
+        return Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
+    }
+};
+var LinearAlgebra_default = LinearAlgebra;
+export { Avatar_default as Avatar, Button_default as Button, Canvas, ColorPickerSlider_default as ColorPickerSlider, DropdownSelect_default as DropdownSelect, Image_default as Image, ImageEditor_default as ImageEditor, Image_default2 as ImageUtilities, InputFile_default as InputFile, InputGoogle_default as InputGoogle, LinearAlgebra_default as LinearAlgebra, MultiSelect_default as MultiSelect, OptionSlider_default as OptionSlider, RangeSlider_default as RangeSlider, SessionProvider_default as SessionProvider, TextArea_default as TextArea, Transform, UploadImage_default as UploadImage, tools_default as tools, useAuthClient_default as useAuthClient, useSession };