@syncfusion/ej2-image-editor 31.1.17 → 31.1.22

package/dist/ts/image-editor/action/freehand-draw.ts

@@ -1,1135 +0,0 @@
-import { EventHandler, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { ActivePoint } from '@syncfusion/ej2-inputs';
-import { FreehandDraw, Point, SelectionPoint, ShapeChangeEventArgs, ShapeSettings, ShapeType, StrokeSettings } from '../index';
-import { CurrentObject, ImageDimension, ImageEditor } from '../index';
-
-export class FreehandDrawing {
-    private parent: ImageEditor;
-    private lowerContext: CanvasRenderingContext2D;
-    private upperContext: CanvasRenderingContext2D;
-    private fhdObj: FreehandDraw = {lastWidth: 0, lastVelocity: 0, time: 0, pointX: 0, pointY: 0};
-    private isFreehandDrawing: boolean = false;
-    private freehandDownPoint: Point = {x: 0, y: 0};
-    private isFreehandPointMoved: boolean = false;
-    private fhdHovIdx: number; // Specifies current hovered index of freehand drawing
-    private pointCounter: number = 0;
-    // eslint-disable-next-line
-    private selPointColl: any = {};
-    private penStrokeWidth: number;
-    private currFHDIdx: number = 0; // Specifies id for every freehand drawing - uses while deleting
-    private selPoints: Point[] = [];
-    private dummyPoints: Point[] = [];
-    private fhdSelID: string;
-    private tempFHDStyles: StrokeSettings = {strokeColor: null, fillColor: null, strokeWidth: null};
-    private fhdSelIdx: number;
-    private straightenPoint: Point = {x: null, y: null, ratioX: null, ratioY: null };
-    private prevStraightenObj: SelectionPoint;
-    private straightenPointAngle: number = 0;
-    private isMasking: boolean = false;
-
-    constructor(parent: ImageEditor) {
-        this.parent = parent;
-        this.addEventListener();
-    }
-
-    public destroy(): void {
-        if (this.parent.isDestroyed) { return; }
-        this.removeEventListener();
-    }
-
-    private addEventListener(): void {
-        this.parent.on('freehand-draw', this.draw, this);
-        this.parent.on('destroyed', this.destroy, this);
-    }
-
-    private removeEventListener(): void {
-        this.parent.off('freehand-draw', this.draw);
-        this.parent.off('destroyed', this.destroy);
-    }
-
-    private draw(args?: { onPropertyChange: boolean, prop: string, value?: object }): void {
-        this.updateFhdPvtVar();
-        switch (args.prop) {
-        case 'hoverFhd': {
-            this.hoverFhd(args.value['strokeColor'], args.value['strokeWidth']);
-            break;
-        }
-        case 'freehandDownHandler':
-            this.freehandDownHandler(args.value['e'], args.value['canvas']);
-            break;
-        case 'freehandUpHandler':
-            this.freehandUpHandler(args.value['e'], args.value['canvas'], args.value['context']);
-            break;
-        case 'handle-freehand-draw': {
-            const id: number = parseInt(args.value['id'].split('_')[1], 10) - 1;
-            if (this.isFHDIdx(id)) {
-                this.deleteFhd(id, true);
-            }
-            break;
-        }
-        case 'freehandRedraw':
-            this.freehandRedraw(args.value['context'], args.value['points']);
-            break;
-        case 'deleteFhd': {
-            const id: number = parseInt(args.value['id'].split('_')[1], 10) - 1;
-            this.deleteFhd(id, true);
-            break;
-        }
-        case 'selectFhd': {
-            let id: number = null;
-            if (args.value['id']) {
-                id = parseInt(args.value['id'].split('_')[1], 10) - 1;
-            }
-            this.selectFhd(id);
-            break;
-        }
-        case 'applyFhd':
-            this.applyFhd();
-            break;
-        case 'cancelFhd':
-            this.cancelFhd();
-            break;
-        case 'updateFHDCurPts':
-            this.updateFHDCurPts();
-            break;
-        case 'rotateFhdColl':
-            this.rotateFhdColl();
-            break;
-        case 'flipFHDColl':
-            this.flipFHDColl(args.value['value']);
-            break;
-        case 'panFHDColl':
-            this.panFHDColl(args.value['xDiff'], args.value['yDiff'], args.value['panRegion']);
-            break;
-        case 'updateFHDColl':
-            if (args.value && args.value['isPreventApply']) {
-                this.updateFHDColl(args.value['isPreventApply']);
-            } else {
-                this.updateFHDColl();
-            }
-            break;
-        case 'zoomFHDColl':
-            this.zoomFHDColl(args.value['isPreventApply']);
-            break;
-        case 'apply-pen-draw':
-            this.applyPenDraw();
-            break;
-        case 'freeHandDraw':
-            this.freeHandDraw(args.value['value']);
-            break;
-        case 'isFHDIdx':
-            this.isFHDIdx(args.value['index'], args.value['obj']);
-            break;
-        case 'getSqPtFD':
-            this.getSqPtFD(args.value['idx'], args.value['obj']);
-            break;
-        case 'getSelPointColl':
-            args.value['obj']['selPointColl'] = extend([], this.selPointColl);
-            break;
-        case 'setSelPointColl':
-            this.selPointColl = extend([], args.value['obj']['selPointColl']);
-            break;
-        case 'pushSelPointColl':
-            this.selPointColl.push(extend([], args.value['obj']['selPointColl']));
-            break;
-        case 'setFreehandDrawHoveredIndex':
-            this.fhdHovIdx = args.value['index'];
-            break;
-        case 'getFreehandDrawHoveredIndex':
-            args.value['obj']['index'] = this.fhdHovIdx;
-            break;
-        case 'setPointCounter':
-            this.pointCounter = args.value['value'];
-            break;
-        case 'getPenStrokeWidth':
-            args.value['obj']['penStrokeWidth'] = this.penStrokeWidth;
-            break;
-        case 'setPenStrokeWidth':
-            this.penStrokeWidth = args.value['value'];
-            break;
-        case 'getCurrentFreehandDrawIndex':
-            args.value['obj']['currentFreehandDrawIndex'] = this.currFHDIdx;
-            break;
-        case 'setCurrentFreehandDrawIndex':
-            this.currFHDIdx = args.value['value'];
-            break;
-        case 'updateCropPtsForSel':
-            this.updateCropPtsForSel();
-            break;
-        case 'getFreehandDrawSelectedId':
-            args.value['obj']['freehandDrawSelectedId'] = this.fhdSelID;
-            break;
-        case 'resetFreehandDrawSelectedId':
-            this.fhdSelID = null;
-            break;
-        case 'getTempFreeHandDrawEditingStyles':
-            args.value['obj']['tempFreeHandDrawEditingStyles'] = this.tempFHDStyles;
-            break;
-        case 'setFreehandSelectedIndex':
-            this.fhdSelIdx = args.value['index'];
-            break;
-        case 'getFreehandSelectedIndex':
-            args.value['obj']['freehandSelectedIndex'] = this.fhdSelIdx;
-            break;
-        case 'setCenterSelPoints':
-            this.setCenterSelPoints();
-            break;
-        case 'getStraightenPoint':
-            args.value['obj']['straightenPoint'] = extend({}, this.straightenPoint, {}, true);
-            break;
-        case 'setStraightenPoint':
-            this.straightenPoint.x = args.value['x'];
-            this.straightenPoint.y = args.value['y'];
-            if (args.value['ratioX'] && args.value['ratioY']) {
-                this.straightenPoint.ratioX = args.value['ratioX'];
-                this.straightenPoint.ratioY = args.value['ratioY'];
-            }
-            break;
-        case 'resetStraightenPoint':
-            this.straightenPoint = {x: null, y: null, ratioX: null, ratioY: null };
-            this.prevStraightenObj = null; this.straightenPointAngle = 0;
-            break;
-        case 'getStraightenPointAngle':
-            args.value['obj']['angle'] = this.straightenPointAngle;
-            break;
-        case 'reset':
-            this.reset();
-            break;
-        case 'triggerShapeChanging':
-            this.triggerShapeChanging(args.value['shapeChangingArgs']);
-            break;
-        case 'setMasking':
-            this.isMasking = args.value['value'];
-            break;
-        case 'resetSelPoints':
-            this.selPoints = [];
-            break;
-        }
-    }
-
-    private updateFhdPvtVar(): void {
-        const parent: ImageEditor = this.parent;
-        if (parent.lowerCanvas) {this.lowerContext = parent.lowerCanvas.getContext('2d'); }
-        if (parent.upperCanvas) {this.upperContext = parent.upperCanvas.getContext('2d'); }
-    }
-
-    private reset(): void {
-        this.fhdObj = {lastWidth: 0, lastVelocity: 0, time: 0, pointX: 0, pointY: 0};
-        this.isFreehandDrawing = this.isFreehandPointMoved = false; this.selPoints = []; this.dummyPoints = [];
-        this.freehandDownPoint = {x: 0, y: 0}; this.selPointColl = {}; this.straightenPointAngle = 0;
-        this.fhdHovIdx = null; this.pointCounter = 0; this.fhdSelID = null; this.isMasking = false;
-        this.penStrokeWidth = undefined; this.currFHDIdx = 0; this.fhdSelIdx = null;
-        this.tempFHDStyles = {strokeColor: null, fillColor: null, strokeWidth: null};
-        this.straightenPoint = {x: null, y: null, ratioX: null, ratioY: null }; this.prevStraightenObj = null;
-    }
-
-    public getModuleName(): string {
-        return 'freehand-draw';
-    }
-
-    private hoverFhd(fillStyle?: string, strokeWidth?: number): void {
-        const parent: ImageEditor = this.parent;
-        const context: CanvasRenderingContext2D = this.upperContext;
-        let idx: number = -1;
-        if (this.fhdHovIdx > -1) {idx = this.fhdHovIdx; }
-        else {idx = this.fhdSelIdx; }
-        parent.points = extend([], parent.pointColl[idx as number].points) as Point[];
-        this.pointCounter = 0;
-        const len: number = parent.points.length;
-        let controlPoint1: Point; let controlPoint2: Point; let startPoint: Point; let endPoint: Point;
-        let minStrokeWidth: number = 0; let maxStrokeWidth: number = 0;
-        context.fillStyle = fillStyle ? fillStyle : parent.pointColl[idx as number].strokeColor;
-        context.strokeStyle = context.fillStyle;
-        minStrokeWidth = maxStrokeWidth = this.penStrokeWidth = strokeWidth ?
-            strokeWidth : parent.pointColl[idx as number].strokeWidth;
-        if (len === 1) {
-            controlPoint1 = controlPoint2 = startPoint = endPoint = parent.points[0];
-            this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
-        }
-        for (let l: number = 0; l < len - 3; l++) {
-            if (parent.points[l + 1] && parent.points[l + 2] && parent.points[l + 2]) {
-                controlPoint1 = (this.calcCurveCP(parent.points[l + 0], parent.points[l + 1],
-                                                  parent.points[l + 2])).controlPoint2;
-                controlPoint2 = (this.calcCurveCP(parent.points[l + 1], parent.points[l + 2],
-                                                  parent.points[l + 3])).controlPoint1;
-                if (l === 0) {
-                    startPoint = parent.points[l as number];
-                } else {
-                    startPoint = parent.points[l + 1];
-                }
-                endPoint = parent.points[l + 2];
-                this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
-            }
-        }
-        context.closePath();
-        // Outer selection
-        const point: ActivePoint = this.getSqPtFD(idx);
-        const tempLineWidth: number = context.lineWidth;
-        context.lineWidth = 2;
-        context.strokeStyle = parent.themeColl[parent.theme]['primaryColor'];
-        context.beginPath();
-        context.rect(point.startX, point.startY, point.width, point.height);
-        context.stroke(); context.closePath();
-        context.lineWidth = tempLineWidth;
-    }
-
-    private freehandDownHandler(e: MouseEvent & TouchEvent, canvas: HTMLCanvasElement): void {
-        const parent: ImageEditor = this.parent;
-        parent.lowerCanvas = document.querySelector('#' + parent.element.id + '_lowerCanvas');
-        this.lowerContext = parent.lowerCanvas.getContext('2d');
-        parent.upperCanvas = document.querySelector('#' + parent.element.id + '_upperCanvas');
-        this.upperContext = parent.upperCanvas.getContext('2d');
-        this.fhdObj.time = new Date().getTime();
-        this.isFreehandDrawing = true;
-        if (e.type === 'mousedown') {this.freehandDownPoint = {x: e.clientX, y: e.clientY}; }
-        else {this.freehandDownPoint = {x: e.touches[0].clientX, y: e.touches[0].clientY }; }
-        this.isFreehandPointMoved = false;
-        EventHandler.add(canvas, 'mousemove touchmove', this.freehandMoveHandler, this);
-        const shapeSettings: ShapeSettings = {id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
-            startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
-            strokeColor: parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
-            points: null, index: parent.objColl.length + parent.freehandCounter + 1 };
-        const shapeChangingArgs: ShapeChangeEventArgs = {cancel: false, action: 'draw-start', previousShapeSettings: shapeSettings,
-            currentShapeSettings: shapeSettings};
-        this.triggerShapeChanging(shapeChangingArgs);
-    }
-
-    private freehandUpHandler(e: MouseEvent & TouchEvent, canvas: HTMLCanvasElement, context: CanvasRenderingContext2D): void {
-        const rect: DOMRect = canvas.getBoundingClientRect() as DOMRect;
-        const parent: ImageEditor = this.parent;
-        EventHandler.remove(canvas, 'mousemove touchmove', this.freehandMoveHandler);
-        if (parent.points.length === 0) {
-            if (e.type === 'mouseup') {this.processPoint(e.clientX - rect.left, e.clientY - rect.top, true, context); }
-            else if (e.type === 'touchend' && e.changedTouches) {
-                this.processPoint(e.changedTouches[0].clientX - rect.left, e.changedTouches[0].clientY - rect.top, true, context);
-            } else {
-                if (!this.isFreehandPointMoved) {
-                    this.processPoint(this.freehandDownPoint.x - rect.left, this.freehandDownPoint.y - rect.top, true, context);
-                }
-            }
-        }
-        context.closePath();
-        const prevCropObj: CurrentObject = extend({}, parent.cropObj, {}, true) as CurrentObject;
-        const object: Object = {currObj: {} as CurrentObject };
-        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: {object: object }});
-        const prevObj: CurrentObject = object['currObj'];
-        prevObj.objColl = extend([], parent.objColl, [], true) as SelectionPoint[];
-        prevObj.pointColl = extend([], parent.pointColl, [], true) as Point[];
-        prevObj.afterCropActions = extend([], parent.afterCropActions, [], true) as string[];
-        const selPointCollObj: Object = {selPointColl: null };
-        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: {obj: selPointCollObj }});
-        prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true) as Point[];
-        const fhCnt: number = parent.freehandCounter;
-        const order: number = parent.objColl.length + parent.freehandCounter + 1;
-        parent.pointColl[fhCnt as number] = { points: extend([], parent.points), strokeColor: parent.activeObj.strokeSettings.strokeColor,
-            strokeWidth: this.penStrokeWidth, flipState: parent.transform.currFlipState,
-            id: 'pen_' + (this.currFHDIdx + 1), order: order};
-        parent.points = []; this.dummyPoints = [];
-        this.selPointColl[fhCnt as number] = { points: extend([], this.selPoints) };
-        this.selPoints = []; this.pointCounter = 0;
-        parent.freehandCounter++;
-        this.isFreehandDrawing = false;
-        if (!parent.isMaskImage) {
-            parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                value: {operation: 'freehand-draw', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                    previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                    previousCropObj: prevCropObj, previousText: null,
-                    currentText: null, previousFilter: null, isCircleCrop: null}});
-        }
-        const shapeSettings: ShapeSettings = {id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
-            startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
-            strokeColor: parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
-            points: parent.pointColl[this.currFHDIdx].points, index: order };
-        const shapeChangingArgs: ShapeChangeEventArgs = {cancel: false, action: 'draw-end', previousShapeSettings: shapeSettings,
-            currentShapeSettings: shapeSettings};
-        this.triggerShapeChanging(shapeChangingArgs);
-        this.currFHDIdx++;
-    }
-
-    private freehandMoveHandler(e: MouseEvent & TouchEvent): void {
-        this.isFreehandPointMoved = true;
-        const rect: DOMRect = this.parent.upperCanvas.getBoundingClientRect() as DOMRect;
-        let x: number; let y: number;
-        if (e.type === 'mousemove') {
-            x = e.clientX - rect.left; y = e.clientY - rect.top;
-        } else {
-            x = e.touches[0].clientX - rect.left; y = e.touches[0].clientY - rect.top;
-        }
-        if (this.isFreehandDrawing) {
-            this.upperContext.fillStyle = this.parent.activeObj.strokeSettings.strokeColor;
-            if (this.parent.isMaskImage) {this.upperContext.globalCompositeOperation = 'xor'; }
-            this.processPoint(x, y, false, this.upperContext);
-        }
-    }
-
-    private processPoint(x: number, y: number, mouseDown: boolean, context: CanvasRenderingContext2D): void {
-        const parent: ImageEditor = this.parent;
-        let lastPoint: Point = this.point(x, y, new Date().getTime());
-        lastPoint = parent.points.length > 0 && parent.points[parent.points.length - 1];
-        const isLastPointTooClose: boolean = lastPoint ? this.distanceTo(lastPoint) <= 5 : false;
-        let controlPoint1: Point; let controlPoint2: Point;
-        let startPoint: Point; let endPoint: Point;
-        this.selPoints.push({x: x, y: y, ratioX: (x - parent.img.destLeft) / parent.img.destWidth,
-            ratioY: (y - parent.img.destTop) / parent.img.destHeight, time: this.fhdObj.time });
-        if (!lastPoint || !(lastPoint && isLastPointTooClose) || mouseDown) {
-            this.fhdObj.time = new Date().getTime();
-            parent.points.push({x: x, y: y, ratioX: (x - parent.img.destLeft) / parent.img.destWidth,
-                ratioY: (y - parent.img.destTop) / parent.img.destHeight,
-                time: this.fhdObj.time });
-            this.dummyPoints.push({x: x, y: y, ratioX: (x - parent.img.destLeft) / parent.img.destWidth,
-                ratioY: (y - parent.img.destTop) / parent.img.destHeight,
-                time: this.fhdObj.time });
-            if (this.dummyPoints.length > 2) {
-                if (this.dummyPoints.length === 3) {
-                    this.dummyPoints.unshift(this.dummyPoints[0]);
-                }
-                const p0: Point = this.dummyPoints[0];
-                const p1: Point = this.dummyPoints[1];
-                const p2: Point = this.dummyPoints[2];
-                const p3: Point = this.dummyPoints[3];
-                controlPoint1 = this.calcCurveCP(p0, p1, p2).controlPoint2;
-                controlPoint2 = this.calcCurveCP(p1, p2, p3).controlPoint1;
-                startPoint = this.dummyPoints[1];
-                endPoint = this.dummyPoints[2];
-                let minStrokeWidth: number = 0.5; let maxStrokeWidth: number = 5;
-                if (!isNullOrUndefined(this.penStrokeWidth)) {
-                    minStrokeWidth = maxStrokeWidth = this.penStrokeWidth;
-                }
-                this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
-                this.pointCounter++;
-                this.dummyPoints.shift();
-            }
-            if (mouseDown) {
-                controlPoint1 = controlPoint2 = startPoint = endPoint = {x: x, y: y, time: new Date().getTime()};
-                let minStrokeWidth: number = 0.5; let maxStrokeWidth: number = 5;
-                if (!isNullOrUndefined(this.penStrokeWidth)) {
-                    minStrokeWidth = maxStrokeWidth = this.penStrokeWidth;
-                }
-                this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
-            }
-        }
-    }
-
-    private calcCurveCP(p1: Point, p2: Point, p3: Point): {controlPoint1: Point, controlPoint2: Point} {
-        if (!p2) { p2 = p1; } if (!p3) { p3 = p2; }
-        const dx1: number = p1.x - p2.x; const dy1: number = p1.y - p2.y;
-        const dx2: number = p2.x - p3.x; const dy2: number = p2.y - p3.y;
-        const m1: Point = { x: (p1.x + p2.x) / 2.0, y: (p1.y + p2.y) / 2.0 };
-        const m2: Point = { x: (p2.x + p3.x) / 2.0, y: (p2.y + p3.y) / 2.0 };
-        const l1: number = Math.sqrt(dx1 * dx1 + dy1 * dy1);
-        const l2: number = Math.sqrt(dx2 * dx2 + dy2 * dy2);
-        const dxm: number = (m1.x - m2.x); const dym: number = (m1.y - m2.y);
-        const k: number = l2 / (l1 + l2);
-        const cm: Point = { x: m2.x + dxm * k, y: m2.y + dym * k };
-        const tx: number = p2.x - cm.x; const ty: number = p2.y - cm.y;
-        return {
-            controlPoint1: this.point(m1.x + tx, m1.y + ty, 0),
-            controlPoint2: this.point(m2.x + tx, m2.y + ty, 0)
-        };
-    }
-
-    private point(x: number, y: number, time: number): Point {
-        this.fhdObj.pointX = x; this.fhdObj.pointY = y;
-        return {x: this.fhdObj.pointX, y: this.fhdObj.pointY, time: time};
-    }
-
-    private startDraw(context: CanvasRenderingContext2D, controlPoint1: Point, controlPoint2: Point,
-                      startPoint: Point, endPoint: Point, minStrokeWidth: number, maxStrokeWidth: number): void {
-        let tempVelocity: number;
-        tempVelocity = this.pointVelocity(startPoint);
-        tempVelocity = 0.7 * tempVelocity + (1 - 0.7) * this.fhdObj.lastVelocity;
-        const newWidth: number  = Math.max(maxStrokeWidth / (0.7 + 1), minStrokeWidth);
-        this.drawCurve(this.fhdObj.time, newWidth, context, controlPoint1, controlPoint2, startPoint, endPoint, maxStrokeWidth);
-        this.fhdObj.lastVelocity = tempVelocity; this.fhdObj.time = newWidth;
-    }
-
-    private pointVelocity(startPoint: Point): number{
-        return (this.fhdObj.time !== startPoint.time) ? this.distanceTo(startPoint) /
-        (this.fhdObj.time - startPoint.time) : 0;
-    }
-
-    private distanceTo(start: Point): number{
-        return Math.sqrt(Math.pow(this.fhdObj.pointX - start.x, 2) + Math.pow(this.fhdObj.pointY - start.y, 2));
-    }
-
-    private drawCurve(startWidth: number, endWidth: number, context: CanvasRenderingContext2D, controlPoint1: Point, controlPoint2: Point,
-                      startPoint: Point, endPoint: Point, maxStrokeWidth: number): void {
-        let width: number; let i: number; let t1: number; let t2: number;
-        let t3: number; let u1: number; let u2: number; let u3: number; let x: number; let y: number;
-        const widthValue: number = endWidth - startWidth;
-        const bezierLength: number = this.bezierLength(controlPoint1, controlPoint2, startPoint, endPoint);
-        const drawSteps: number  = Math.ceil(bezierLength) * 2;
-        context.beginPath();
-        for (i = 0; i < drawSteps; i++) {
-            t1 = i / drawSteps; t2 = t1 * t1; t3 = t2 * t1;
-            u1 = 1 - t1; u2 = u1 * u1; u3 = u2 * u1;
-            x = u3 * startPoint.x; x += 3 * u2 * t1 * controlPoint1.x;
-            x += 3 * u1 * t2 * controlPoint2.x; x += t3 * endPoint.x;
-            y = u3 * startPoint.y; y += 3 * u2 * t1 * controlPoint1.y;
-            y += 3 * u1 * t2 * controlPoint2.y; y += t3 * endPoint.y;
-            width = Math.min(startWidth + t3 * widthValue, maxStrokeWidth);
-            this.drawArc(x, y, width, context);
-        }
-        context.closePath(); context.fill();
-    }
-
-    private bezierLength(controlPoint1: Point, controlPoint2: Point, startPoint: Point, endPoint: Point): number {
-        const steps: number = 10; let length: number = 0; let i: number; let t: number;
-        let pointX1: number; let pointY1: number; let pointX2: number; let pointY2: number;
-        let pointX3: number; let pointY3: number;
-        for (i = 0; i <= steps; i++) {
-            t = i / steps;
-            pointX1 = this.bezierPoint(t, startPoint.x, controlPoint1.x, controlPoint2.x, endPoint.x);
-            pointY1 = this.bezierPoint(t, startPoint.y, controlPoint1.y, controlPoint2.y, endPoint.y);
-            if (i > 0) {
-                pointX3 = pointX1 - pointX2; pointY3 = pointY1 - pointY2;
-                length += Math.sqrt(pointX3 * pointX3 + pointY3 * pointY3);
-            }
-            pointX2 = pointX1; pointY2 = pointY1;
-        }
-        return length;
-    }
-
-    private bezierPoint(t: number, startPoint: number, cp1: number, cp2: number, endPoint: number): number {
-        return startPoint * (1.0 - t) * (1.0 - t) * (1.0 - t) + 3.0 * cp1 * (1.0 - t) * (1.0 - t) * t + 3.0 *
-        cp2 * (1.0 - t) * t * t + endPoint * t * t * t;
-    }
-
-    private drawArc(x: number, y: number, size: number, context: CanvasRenderingContext2D): void {
-        const img: ImageDimension = this.parent.img;
-        if ((x > img.destLeft && y > img.destTop && x < (img.destLeft + img.destWidth) &&
-            y < (img.destTop + img.destHeight) ||
-            (context !== this.lowerContext && context !== this.upperContext))) {
-            context.moveTo(x, y); context.arc(x, y, size, 0, 2 * Math.PI, false);
-        }
-    }
-
-    private freehandRedraw(context: CanvasRenderingContext2D, points?: Point[]): void {
-        const parent: ImageEditor = this.parent;
-        const temp: string = context.filter; context.filter = 'none';
-        if (points) {
-            parent.pointColl[parent.freehandCounter] = { points: points, strokeColor: parent.activeObj.strokeSettings.strokeColor,
-                strokeWidth: this.penStrokeWidth, flipState: parent.transform.currFlipState,
-                id: 'pen_' + (parent.freehandCounter + 1), order: parent.objColl.length + parent.freehandCounter + 1 };
-            this.selPointColl[parent.freehandCounter] = extend({}, parent.pointColl[parent.freehandCounter], {}, true);
-            parent.freehandCounter++;
-        }
-        if (parent.freehandCounter > 0) {
-            for (let n: number = 0; n < parent.freehandCounter; n++) {
-                parent.points = extend([], parent.pointColl[n as number].points) as Point[];
-                this.pointCounter = 0;
-                const len: number = parent.points.length;
-                let controlPoint1: Point; let controlPoint2: Point; let startPoint: Point; let endPoint: Point;
-                let minStrokeWidth: number; let maxStrokeWidth: number;
-                if (len > 0) {
-                    context.fillStyle = parent.pointColl[n as number].strokeColor;
-                    minStrokeWidth = maxStrokeWidth = this.penStrokeWidth = parent.pointColl[n as number].strokeWidth;
-                }
-                if (len === 1) {
-                    controlPoint1 = controlPoint2 = startPoint = endPoint = parent.points[0];
-                    this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
-                }
-                for (let l: number = 0; l < len - 3; l++) {
-                    if (parent.points[l + 1] && parent.points[l + 2] && parent.points[l + 2]) {
-                        controlPoint1 = (this.calcCurveCP(parent.points[l + 0],
-                                                          parent.points[l + 1], parent.points[l + 2])).controlPoint2;
-                        controlPoint2 = (this.calcCurveCP(parent.points[l + 1], parent.points[l + 2],
-                                                          parent.points[l + 3])).controlPoint1;
-                        if (l === 0) {
-                            startPoint = parent.points[l as number];
-                        } else {
-                            startPoint = parent.points[l + 1];
-                        }
-                        endPoint = parent.points[l + 2];
-                        this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
-                    }
-                }
-                context.closePath();
-            }
-            if (context === this.lowerContext) {
-                parent.notify('draw', {prop: 'applyFrame', value: {ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true}});
-                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-            }
-        }
-        context.filter = temp;
-    }
-
-    private getSqPtFD(idx: number, obj?: Object): ActivePoint {
-        const activePoint: ActivePoint = {startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0};
-        const sPoints: Point[] = extend([], this.selPointColl[idx as number].points, []) as Point[];
-        this.parent.points = extend([], this.parent.pointColl[idx as number].points) as Point[];
-        this.pointCounter = 0; const len: number = sPoints.length;
-        for (let l: number = 0; l < len; l++) {
-            if (activePoint.startX === 0 && activePoint.startY === 0 && activePoint.endX === 0 && activePoint.endY === 0) {
-                activePoint.startX = sPoints[l as number].x;
-                activePoint.startY = sPoints[l as number].y;
-                activePoint.endX = sPoints[l as number].x;
-                activePoint.endY = sPoints[l as number].y;
-            } else {
-                activePoint.startX = Math.min(activePoint.startX, sPoints[l as number].x);
-                activePoint.startY = Math.min(activePoint.startY, sPoints[l as number].y);
-                activePoint.endX = Math.max(activePoint.endX, sPoints[l as number].x);
-                activePoint.endY = Math.max(activePoint.endY, sPoints[l as number].y);
-            }
-        }
-        activePoint.startX -= this.penStrokeWidth; activePoint.startY -= this.penStrokeWidth;
-        activePoint.endX += this.penStrokeWidth; activePoint.endY += this.penStrokeWidth;
-        activePoint.width = activePoint.endX - activePoint.startX;
-        activePoint.height = activePoint.endY - activePoint.startY;
-        if (obj) { obj['activePoint'] = activePoint; }
-        return activePoint;
-    }
-
-    private applyPenDraw(): void {
-        const parent: ImageEditor = this.parent;
-        if (parent.currObjType.shape === 'freehanddraw') {
-            parent.notify('shape', { prop: 'apply', onPropertyChange: false, value: {shape: null, obj: null, canvas: null}});
-            parent.upperCanvas.style.cursor = parent.cursor = 'default';
-            parent.currObjType.shape = '';
-        }
-        parent.notify('shape', {prop: 'clearActObj'});
-    }
-
-    private applyFhd(): void {
-        const parent: ImageEditor = this.parent;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const selectedPoint: any = parent.pointColl[this.fhdSelIdx];
-        if (selectedPoint.strokeColor === '#42a5f5') {
-            selectedPoint.strokeColor = this.tempFHDStyles.strokeColor;
-        }
-        parent.notify('toolbar', {prop: 'setSelectedFreehandColor', value: {color: '#42a5f5' } });
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        parent.notify('draw', {prop: 'render-image', value: {isMouseWheel: null } });
-        parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false});
-        if (selectedPoint) {
-            selectedPoint.isSelected = false;
-        }
-        parent.notify('selection', {prop: 'resetFreehandDrawVariables'});
-        this.fhdHovIdx = this.fhdSelIdx = null;
-    }
-
-    private cancelFhd(): void {
-        const parent: ImageEditor = this.parent;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const selectedPoint: any = parent.pointColl[this.fhdSelIdx];
-        parent.notify('toolbar', {prop: 'setSelectedFreehandColor', value: {color: '#42a5f5' } });
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        this.lowerContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        this.pointCounter = 0;
-        if (selectedPoint) {
-            selectedPoint.strokeColor = this.tempFHDStyles.strokeColor;
-            selectedPoint.strokeWidth = this.tempFHDStyles.strokeWidth;
-            selectedPoint.isSelected = false;
-        }
-        this.fhdHovIdx = this.fhdSelIdx = this.fhdSelID = null;
-        parent.notify('selection', {prop: 'resetFreehandDrawVariables'});
-        parent.activeObj.strokeSettings.strokeColor = this.tempFHDStyles.strokeColor;
-        parent.activeObj.strokeSettings.strokeWidth = this.penStrokeWidth = this.tempFHDStyles.strokeWidth;
-        this.tempFHDStyles = {strokeColor: null, strokeWidth: null, fillColor: null};
-        parent.notify('draw', {prop: 'render-image', value: {isMouseWheel: null } });
-        parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false});
-    }
-
-    private selectFhd(index?: number): void {
-        const parent: ImageEditor = this.parent;
-        const tempFHDStyles: StrokeSettings = extend({}, this.tempFHDStyles, {}, true) as StrokeSettings;
-        parent.notify('selection', { prop: 'setFreehandDrawEditing', onPropertyChange: false, value: {bool: true }});
-        if (index || index === 0) {
-            if (this.isFHDIdx(index)) {
-                this.fhdSelIdx = this.fhdHovIdx = index;
-                this.hoverFhd();
-                parent.upperCanvas.style.cursor = parent.cursor = 'pointer';
-            } else {
-                return;
-            }
-        }
-        this.fhdSelIdx = this.fhdHovIdx;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const point: any = parent.pointColl[this.fhdSelIdx];
-        point.isSelected = true; this.fhdSelID = point.id;
-        if (point.strokeColor !== '#42a5f5') {
-            parent.activeObj.strokeSettings.strokeColor = this.tempFHDStyles.strokeColor = point.strokeColor;
-        }
-        parent.activeObj.strokeSettings.strokeWidth = this.tempFHDStyles.strokeWidth =
-            parent.pointColl[this.fhdHovIdx].strokeWidth;
-        const obj: Object = {bool: false };
-        parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: {obj: obj }});
-        if (obj['bool']) {
-            const shapeSettings: ShapeSettings = {id: 'pen_' + (this.fhdSelIdx + 1), type: ShapeType.FreehandDraw,
-                startX: point.points[0].x, startY: point.points[0].y, strokeColor: point.strokeColor,
-                strokeWidth: point.strokeWidth, points: point.points, opacity: point.opacity,
-                index: point.order };
-            const shapeChangingArgs: ShapeChangeEventArgs = {cancel: false, action: 'select', previousShapeSettings: shapeSettings,
-                currentShapeSettings: shapeSettings};
-            this.triggerShapeChanging(shapeChangingArgs);
-        } else {
-            parent.okBtn(null, true);
-        }
-        if (parent.isUndoRedoStack) {
-            this.tempFHDStyles = tempFHDStyles;
-        }
-    }
-
-    // eslint-disable-next-line  @typescript-eslint/no-unused-vars
-    private deleteFhd(index: number, isId?: boolean): void {
-        const parent: ImageEditor = this.parent;
-        if (this.isFHDIdx(index)) {
-            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const tempPointColl: any = extend({}, parent.pointColl, {}, true);
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const tempSelPointColl: any = extend({}, this.selPointColl, {}, true);
-            parent.pointColl = {}; this.selPointColl = {}; let count: number = 0;
-            for (let i: number = 0; i < parent.freehandCounter; i++) {
-                if (parseInt(tempPointColl[i as number].id.split('_')[1], 10) - 1 !== index) {
-                    parent.pointColl[count as number] = tempPointColl[i as number];
-                    this.selPointColl[count as number] = tempSelPointColl[i as number];
-                    count++;
-                }
-            }
-            parent.freehandCounter -= 1; this.fhdHovIdx = this.fhdSelIdx = null;
-            parent.notify('selection', {prop: 'resetFreehandDrawVariables'});
-            parent.notify('draw', {prop: 'render-image', value: {isMouseWheel: null } });
-            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false});
-        }
-    }
-
-    private zoomX(x: number): number {
-        return (x * this.parent.img.destWidth) + this.parent.img.destLeft;
-    }
-
-    private zoomY(y: number): number {
-        return (y * this.parent.img.destHeight) + this.parent.img.destTop;
-    }
-
-    private zoomFHDColl(isPreventApply?: boolean): void {
-        const parent: ImageEditor = this.parent;
-        const destPoints: ActivePoint = {startX: parent.img.destLeft, startY: parent.img.destTop,
-            width: parent.img.destWidth, height: parent.img.destHeight};
-        parent.notify('shape', { prop: 'straightenShapes', onPropertyChange: false});
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            parent.points = extend([], parent.pointColl[n as number].points, []) as Point[];
-            this.pointCounter = 0; const len: number = parent.points.length;
-            for (let l: number = 0; l < len; l++) {
-                const point: Point = parent.points[l as number];
-                point.x = this.zoomX(point.ratioX);
-                point.y = this.zoomY(point.ratioY);
-            }
-        }
-        this.updateFHDCurPts();
-        if (this.straightenPoint.x && this.straightenPoint.y) {
-            this.straightenPoint.x = this.zoomX(this.straightenPoint.ratioX);
-            this.straightenPoint.y = this.zoomY(this.straightenPoint.ratioY);
-        }
-        if (parent.transform.straighten !== 0) {
-            parent.notify('shape', { prop: 'straightenFHD', onPropertyChange: false});
-        }
-        parent.img.destLeft = destPoints.startX; parent.img.destTop = destPoints.startY;
-        parent.img.destWidth = destPoints.width; parent.img.destHeight = destPoints.height;
-        if (isNullOrUndefined(isPreventApply)) {
-            this.freehandRedraw(this.lowerContext, null);
-        }
-    }
-
-    private updateFHDCurPts(): void {
-        const parent: ImageEditor = this.parent;
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            if (this.selPointColl[n as number]) {
-                this.selPoints = extend([], this.selPointColl[n as number].points, []) as Point[];
-                this.pointCounter = 0; const len: number = this.selPoints.length;
-                for (let l: number = 0; l < len; l++) {
-                    const point: Point = this.selPoints[l as number];
-                    point.x = this.zoomX(point.ratioX);
-                    point.y = this.zoomY(point.ratioY);
-                }
-            }
-        }
-    }
-
-    private rotateFhdColl(): void {
-        const parent: ImageEditor = this.parent;
-        const { destLeft, destTop, destWidth, destHeight } = parent.img;
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            parent.points = extend([], parent.pointColl[n as number].points, []) as Point[];
-            this.pointCounter = 0; const len: number = parent.points.length;
-            for (let l: number = 0; l < len; l++) {
-                const point: Point = parent.points[l as number];
-                point.y = destTop + (destHeight * point.ratioX);
-                point.x = (destLeft + destWidth) - (destWidth * point.ratioY);
-                point.ratioX = (point.x - destLeft) / destWidth;
-                point.ratioY = (point.y - destTop) / destHeight;
-            }
-        }
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            if (this.selPointColl[n as number]) {
-                this.selPoints = extend([], this.selPointColl[n as number].points, []) as Point[];
-                this.pointCounter = 0;
-                const len: number = this.selPoints.length;
-                for (let l: number = 0; l < len; l++) {
-                    const point: Point = this.selPoints[l as number];
-                    point.y = destTop + (destHeight * point.ratioX);
-                    point.x = (destLeft + destWidth) - (destWidth * point.ratioY);
-                    point.ratioX = (point.x - destLeft) / destWidth;
-                    point.ratioY = (point.y - destTop) / destHeight;
-                }
-            }
-        }
-        this.updateFHDCurPts();
-    }
-
-    private flipFHDColl(value: string): void {
-        const lowercaseValue: string = value.toLowerCase();
-        if (lowercaseValue === 'horizontal') {
-            this.pointsHorizontalFlip();
-        } else if (lowercaseValue === 'vertical') {
-            this.pointsVerticalFlip();
-        } else {
-            this.pointsHorizontalFlip();
-            for (let i: number = 0; i < this.parent.freehandCounter; i++) {
-                this.parent.pointColl[i as number].shapeFlip = '';
-            }
-            this.pointsVerticalFlip();
-        }
-    }
-
-    private pointsHorizontalFlip(): void {
-        const parent: ImageEditor = this.parent;
-        const { destLeft, destTop, destWidth, destHeight } = parent.img;
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            if (parent.pointColl[n as number].shapeFlip !== parent.transform.currFlipState) {
-                parent.points = extend([], parent.pointColl[n as number].points, []) as Point[];
-                this.pointCounter = 0;
-                const len: number = parent.points.length;
-                for (let l: number = 0; l < len; l++) {
-                    const point: Point = parent.points[l as number];
-                    if (point.x <= destLeft + (destWidth / 2)) {
-                        point.x = (destLeft + destWidth) - (point.x - destLeft);
-                    } else if (point.x >= destLeft + (destWidth / 2)) {
-                        point.x = destLeft + (destLeft + destWidth - point.x);
-                    }
-                    point.ratioX = (point.x - destLeft) / destWidth;
-                    point.ratioY = (point.y - destTop) / destHeight;
-                }
-                parent.pointColl[n as number].shapeFlip = parent.transform.currFlipState;
-            }
-        }
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            if (this.selPointColl[n as number]) {
-                if (this.selPointColl[n as number].shapeFlip !== parent.transform.currFlipState) {
-                    this.selPoints = extend([], this.selPointColl[n as number].points, []) as Point[];
-                    this.pointCounter = 0;
-                    const len: number = this.selPoints.length;
-                    for (let l: number = 0; l < len; l++) {
-                        const point: Point = this.selPoints[l as number];
-                        if (point.x <= destLeft + (destWidth / 2)) {
-                            point.x = (destLeft + destWidth) - (point.x - destLeft);
-                        } else if (point.x >= destLeft + (destWidth / 2)) {
-                            point.x = destLeft + (destLeft + destWidth - point.x);
-                        }
-                        point.ratioX = (point.x - destLeft) / destWidth;
-                        point.ratioY = (point.y - destTop) / destHeight;
-                    }
-                }
-            }
-        }
-        this.updateFHDCurPts();
-    }
-
-    private pointsVerticalFlip(): void {
-        const parent: ImageEditor = this.parent;
-        const { destLeft, destTop, destWidth, destHeight } = parent.img;
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            if (parent.pointColl[n as number].shapeFlip !== parent.transform.currFlipState) {
-                parent.points = extend([], parent.pointColl[n as number].points, []) as Point[];
-                this.pointCounter = 0;
-                const len: number = parent.points.length;
-                for (let l: number = 0; l < len; l++) {
-                    const point: Point = parent.points[l as number];
-                    if (point.y <= destTop + (destHeight / 2)) {
-                        point.y = (destTop + destHeight) - (point.y - destTop);
-                    } else if (point.y >= destTop + (destHeight / 2)) {
-                        point.y = destTop + (destTop + destHeight - point.y);
-                    }
-                    point.ratioX = (point.x - destLeft) / destWidth;
-                    point.ratioY = (point.y - destTop) / destHeight;
-                }
-                parent.pointColl[n as number].shapeFlip = parent.transform.currFlipState;
-            }
-        }
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            if (this.selPointColl[n as number]) {
-                if (this.selPointColl[n as number].shapeFlip !== parent.transform.currFlipState) {
-                    this.selPoints = extend([], this.selPointColl[n as number].points, []) as Point[];
-                    this.pointCounter = 0;
-                    const len: number = this.selPoints.length;
-                    for (let l: number = 0; l < len; l++) {
-                        const point: Point = this.selPoints[l as number];
-                        if (point.y <= destTop + (destHeight / 2)) {
-                            point.y = (destTop + destHeight) - (point.y - destTop);
-                        } else if (point.y >= destTop + (destHeight / 2)) {
-                            point.y = destTop + (destTop + destHeight - point.y);
-                        }
-                        point.ratioX = (point.x - destLeft) / destWidth;
-                        point.ratioY = (point.y - destTop) / destHeight;
-                    }
-                }
-            }
-        }
-        this.updateFHDCurPts();
-    }
-
-    private updateFHDColl(isPreventApply?: boolean): void {
-        const parent: ImageEditor = this.parent;
-        const destPoints: ActivePoint = {startX: parent.img.destLeft, startY: parent.img.destTop,
-            width: parent.img.destWidth, height: parent.img.destHeight};
-        parent.notify('shape', { prop: 'straightenShapes', onPropertyChange: false});
-        const { destLeft, destTop, destWidth, destHeight } = parent.img;
-        for (let i: number = 0, iLen: number = parent.objColl.length; i < iLen; i++) {
-            const currObj: SelectionPoint = parent.objColl[i as number];
-            if (currObj.shape === 'line' || currObj.shape === 'arrow') {
-                parent.notify('shape', { prop: 'straightenShapePoints', value: {obj: currObj, isReverse: true }});
-            } else if (currObj.shape === 'path') {
-                const temp: number = parent.transform.straighten;
-                parent.transform.straighten = -parent.transform.straighten;
-                parent.notify('shape', { prop: 'straightenPath', onPropertyChange: false, value: {obj: currObj }});
-                parent.transform.straighten = temp;
-            }
-            currObj.imageRatio = {startX: ((currObj.activePoint.startX - destLeft) /
-            destWidth), startY: ((currObj.activePoint.startY - destTop) / destHeight),
-            endX: ((currObj.activePoint.endX - destLeft) / destWidth),
-            endY: ((currObj.activePoint.endY - destTop) / destHeight),
-            width: destWidth / currObj.activePoint.width, height: destHeight /
-            currObj.activePoint.height };
-            if (currObj.shape === 'path') {
-                for (let j: number = 0, jLen: number = currObj.pointColl.length; j < jLen; j++) {
-                    currObj.pointColl[j as number].ratioX =
-                        (currObj.pointColl[j as number].x - destLeft) / destWidth;
-                    currObj.pointColl[j as number].ratioY =
-                        (currObj.pointColl[j as number].y - destTop) / destHeight;
-                }
-            }
-            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
-        }
-        if (parent.freehandCounter > 0 && parent.transform.straighten !== 0) {
-            const temp: number = parent.transform.straighten;
-            parent.transform.straighten = -parent.transform.straighten;
-            parent.notify('shape', { prop: 'straightenFHD', onPropertyChange: false});
-            parent.transform.straighten = temp;
-        }
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            parent.points = extend([], parent.pointColl[n as number].points, []) as Point[];
-            this.pointCounter = 0;
-            const len: number = parent.points.length;
-            for (let l: number = 0; l < len; l++) {
-                const point: Point = parent.points[l as number];
-                point.ratioX = (point.x - destLeft) / destWidth;
-                point.ratioY = (point.y - destTop) / destHeight;
-            }
-        }
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            if (this.selPointColl[n as number]) {
-                this.selPoints = extend([], this.selPointColl[n as number].points, []) as Point[];
-                this.pointCounter = 0;
-                const len: number = this.selPoints.length;
-                for (let l: number = 0; l < len; l++) {
-                    const point: Point = this.selPoints[l as number];
-                    point.ratioX = (point.x - destLeft) / destWidth;
-                    point.ratioY = (point.y - destTop) / destHeight;
-                }
-            }
-        }
-        if (this.straightenPoint.x && this.straightenPoint.y) {
-            this.straightenPoint.ratioX = (this.straightenPoint.x - destLeft) / destWidth;
-            this.straightenPoint.ratioY = (this.straightenPoint.y - destTop) / destHeight;
-        }
-        parent.img.destLeft = destPoints.startX; parent.img.destTop = destPoints.startY;
-        parent.img.destWidth = destPoints.width; parent.img.destHeight = destPoints.height;
-        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-            value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: isPreventApply }});
-    }
-
-    private panFHDColl(xDiff: number, yDiff: number, panRegion: string): void {
-        const parent: ImageEditor = this.parent;
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            parent.points = extend([], parent.pointColl[n as number].points, []) as Point[];
-            this.pointCounter = 0;
-            const len: number = parent.points.length;
-            for (let l: number = 0; l < len; l++) {
-                const point: Point = parent.points[l as number];
-                if (panRegion === '' || panRegion === 'vertical') {
-                    point.x += xDiff;
-                } else {
-                    point.x -= xDiff;
-                }
-                if (panRegion === '' || panRegion === 'horizontal') {
-                    point.y += yDiff;
-                }
-                else {
-                    point.y -= yDiff;
-                }
-            }
-        }
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            if (this.selPointColl[n as number]) {
-                this.selPoints = extend([], this.selPointColl[n as number].points, []) as Point[];
-                this.pointCounter = 0;
-                const len: number = this.selPoints.length;
-                for (let l: number = 0; l < len; l++) {
-                    const point: Point = this.selPoints[l as number];
-                    if (panRegion === '' || panRegion === 'vertical') {
-                        point.x += xDiff;
-                    } else {
-                        point.x -= xDiff;
-                    }
-                    if (panRegion === '' || panRegion === 'horizontal') {
-                        point.y += yDiff;
-                    }
-                    else {
-                        point.y -= yDiff;
-                    }
-                }
-            }
-        }
-        if (this.straightenPoint.x && this.straightenPoint.y) {
-            if (panRegion === '' || panRegion === 'vertical') {
-                this.straightenPoint.x += xDiff;
-            } else {
-                this.straightenPoint.x -= xDiff;
-            }
-            if (panRegion === '' || panRegion === 'horizontal') {
-                this.straightenPoint.y += yDiff;
-            }
-            else {
-                this.straightenPoint.y -= yDiff;
-            }
-        }
-        this.freehandRedraw(this.lowerContext, null);
-    }
-
-    private freeHandDraw(value: boolean): void {
-        const parent: ImageEditor = this.parent;
-        if (value) {
-            parent.points = [];
-            this.dummyPoints = [];
-            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
-            parent.togglePen = true;
-            parent.upperCanvas.style.cursor = parent.cursor = 'crosshair';
-            parent.upperCanvas.style.display = 'block';
-            if (isNullOrUndefined(parent.activeObj.strokeSettings)) {
-                const obj: Object = {strokeSettings: {} as StrokeSettings };
-                parent.notify('shape', { prop: 'getStrokeSettings', onPropertyChange: false,
-                    value: {obj: obj }});
-                parent.activeObj.strokeSettings = obj['strokeSettings'];
-            }
-            if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
-                parent.activeObj.strokeSettings.strokeWidth = 2;
-            }
-            if (parent.isMaskImage) {
-                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false});
-            } else {
-                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'pen',
-                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null}});
-            }
-        } else {
-            parent.upperCanvas.style.cursor = parent.cursor = 'default';
-            const strokeWidth: number = this.penStrokeWidth;
-            parent.notify('shape', { prop: 'apply', onPropertyChange: false, value: {shape: null, obj: null, canvas: null}});
-            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false});
-            parent.notify('toolbar', {prop: 'setCurrentToolbar', value: {type: 'main' }});
-            parent.notify('selection', {prop: 'setFreehandDrawCustomized', value: {isFreehandDrawCustomized: false }});
-            this.penStrokeWidth = strokeWidth;
-        }
-    }
-
-    private isFHDIdx(index: number, obj?: Object): boolean {
-        let isIndex: boolean = false;
-        for (let i: number = 0; i < this.parent.freehandCounter; i++) {
-            if (this.parent.pointColl[i as number].id &&
-                parseInt(this.parent.pointColl[i as number].id.split('_')[1], 10) - 1 === index) {
-                isIndex = true;
-                break;
-            }
-        }
-        if (obj) { obj['isIndex'] = isIndex; }
-        return isIndex;
-    }
-
-    private updateCropPtsForSel(): void {
-        const parent: ImageEditor = this.parent; const actPoint: ActivePoint = parent.activeObj.activePoint;
-        for (let n: number = 0; n < parent.freehandCounter; n++) {
-            const obj: Object = {selPointColl: extend([], this.selPointColl) };
-            if (obj['selPointColl'][n as number]) {
-                this.selPoints = extend([], obj['selPointColl'][n as number].points, []) as Point[];
-                this.pointCounter = 0;
-                const len: number = this.selPoints.length;
-                for (let l: number = 0; l < len; l++) {
-                    const point: Point = this.selPoints[l as number];
-                    point.ratioX = (point.x - actPoint.startX) / actPoint.width;
-                    point.ratioY = (point.y - actPoint.startY) / actPoint.height;
-                }
-            }
-        }
-    }
-
-    private triggerShapeChanging(shapeChangingArgs: ShapeChangeEventArgs) : void {
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        const parent: ImageEditor = this.parent; const point: any = parent.pointColl[this.fhdSelIdx];
-        parent.trigger('shapeChanging', shapeChangingArgs);
-        if (parent.element.getAttribute('data-value') === 'mask-drawing' && !this.isMasking) {
-            this.isMasking = true;
-            parent.upperCanvas.style.cursor = 'crosshair';
-            parent.notify('draw', { prop: 'updateTempObjColl'});
-            parent.notify('draw', { prop: 'updateTempPointColl'});
-            parent.discard();
-            parent.selectMaskImage();
-            return;
-        }
-        parent.editCompleteArgs = shapeChangingArgs;
-        if (shapeChangingArgs.currentShapeSettings.id.indexOf('pen_') === -1 &&
-            (shapeChangingArgs.action === 'draw-end' || shapeChangingArgs.action === 'select')) {
-            const id: string = 'pen_' + shapeChangingArgs.currentShapeSettings.id;
-            if (this.fhdSelIdx) {
-                parent.pointColl[this.fhdSelIdx].id = id;
-            } else {
-                parent.pointColl[parent.freehandCounter - 1].id = id;
-            }
-        }
-        this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
-        if (parent.activeObj.strokeSettings.strokeColor !== shapeChangingArgs.currentShapeSettings.strokeColor) {
-            parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
-            parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-        }
-        if (this.fhdSelID && point && shapeChangingArgs.currentShapeSettings) {
-            point.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
-            point.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
-            point.points = shapeChangingArgs.currentShapeSettings.points;
-            point.opacity = shapeChangingArgs.currentShapeSettings.opacity;
-        }
-        if (shapeChangingArgs.action === 'select') {
-            this.freehandRedraw(this.upperContext);
-            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'pen',
-                isApplyBtn: null, isCropping: null, isZooming: null, cType: null}});
-        }
-    }
-
-    private setCenterSelPoints(): void {
-        const parent: ImageEditor = this.parent;
-        const destPoints: ActivePoint = {startX: parent.img.destLeft, startY: parent.img.destTop,
-            width: parent.img.destWidth, height: parent.img.destHeight};
-        parent.notify('shape', { prop: 'straightenShapes', onPropertyChange: false});
-        const { destLeft, destTop, destWidth, destHeight } = parent.img;
-        const actPoint: ActivePoint = parent.activeObj.activePoint;
-        if (isNullOrUndefined(this.prevStraightenObj) ||
-            (JSON.stringify(this.prevStraightenObj.activePoint) !== JSON.stringify(actPoint))) {
-            this.straightenPoint = { x: actPoint.startX + (actPoint.width / 2),
-                y: actPoint.startY + (actPoint.height / 2),
-                ratioX: (actPoint.startX + (actPoint.width / 2) - destLeft) / destWidth,
-                ratioY: (actPoint.startY + (actPoint.height / 2) - destTop) / destHeight };
-            this.prevStraightenObj = extend({}, parent.activeObj, {}, true) as SelectionPoint;
-            this.straightenPointAngle = parent.transform.straighten;
-        }
-        parent.img.destLeft = destPoints.startX; parent.img.destTop = destPoints.startY;
-        parent.img.destWidth = destPoints.width; parent.img.destHeight = destPoints.height;
-    }
-}