pipwave-ekyc-uikit 2.0.0-5 → 2.0.0-6

package/dist/pw-bundle.js

@@ -3979,7 +3979,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncons
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nclass CardMaskingPlugin {\n    constructor(elementId) {\n        this.elementId = \"\";\n        this.lineOffset = 10;\n        this.mousedown = false;\n        this.clickedArea = { box: -1, pos: \"o\" };\n        this.selectedArea = -1;\n        this.currentCoordinate = { x: -1, y: -1 };\n        this.boxes = [];\n        this.elementId = elementId;\n    }\n    initCard(htmlCanvas, img, maskedCoordinates = []) {\n        this.canvas = htmlCanvas;\n        this.originalImg = img;\n        // convert the masked coordinates from original image to canvas image\n        const scaleX = this.canvas.width / this.originalImg.width;\n        const scaleY = this.canvas.height / this.originalImg.height;\n        this.boxes = maskedCoordinates.map((box) => ({\n            x1: box.x1 * scaleX,\n            y1: box.y1 * scaleY,\n            x2: box.x2 * scaleX,\n            y2: box.y2 * scaleY,\n        }));\n        // add mouse/touch event\n        this.canvas.addEventListener(\"mousedown\", (e) => this.onMousedown(e, this));\n        this.canvas.addEventListener(\"touchstart\", (e) => this.onMousedown(e, this));\n        this.canvas.addEventListener(\"mouseup\", (e) => this.onMouseup(e, this));\n        this.canvas.addEventListener(\"touchend\", (e) => this.onMouseup(e, this));\n        this.canvas.addEventListener(\"mouseout\", (e) => this.onMouseOut(e, this));\n        this.canvas.addEventListener(\"mousemove\", (e) => this.onMouseMove(e, this));\n        this.canvas.addEventListener(\"touchmove\", (e) => {\n            if (!this.isTouchEventWithinEl(e))\n                return this.onMouseOut(e, this);\n            this.onMouseMove(e, this);\n        });\n    }\n    downloadImage(fullImageSrc) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.originalImg || !this.canvas)\n                return;\n            // Create an Image element\n            const flattenedImg = new Image();\n            flattenedImg.src = fullImageSrc || this.originalImg.src;\n            const self = this;\n            // Wait for the image to load\n            return yield new Promise(function (resolve) {\n                flattenedImg.onload = () => {\n                    if (!self.originalImg || !self.canvas)\n                        return resolve(\"\");\n                    // Calculate the cropped dimensions and offsets\n                    let cropOffsetX = 0;\n                    let cropOffsetY = 0;\n                    if (fullImageSrc) {\n                        cropOffsetX = (flattenedImg.width - self.originalImg.width) / 2;\n                        cropOffsetY = (flattenedImg.height - self.originalImg.height) / 2;\n                    }\n                    // Create a canvas element\n                    const flattenedCanvas = document.createElement(\"canvas\");\n                    const flattenedCtx = flattenedCanvas.getContext(\"2d\");\n                    // Set canvas dimensions\n                    flattenedCanvas.width = flattenedImg.width;\n                    flattenedCanvas.height = flattenedImg.height;\n                    // Draw the original image on the canvas\n                    flattenedCtx.drawImage(flattenedImg, 0, 0);\n                    const scaleX = self.originalImg.width / self.canvas.width;\n                    const scaleY = self.originalImg.height / self.canvas.height;\n                    // Draw the boxes on the canvas\n                    for (let i = 0; i < self.boxes.length; i++) {\n                        const box = self.boxes[i];\n                        const boxX1 = box.x1 * scaleX;\n                        const boxY1 = box.y1 * scaleY;\n                        const height = (box.x2 - box.x1) * scaleX;\n                        const width = (box.y2 - box.y1) * scaleY;\n                        flattenedCtx.fillStyle = \"black\";\n                        flattenedCtx.fillRect(boxX1 + cropOffsetX, boxY1 + cropOffsetY, height, width);\n                    }\n                    // Get the combined image data from the canvas\n                    return resolve(flattenedCanvas.toDataURL(\"image/jpeg\"));\n                };\n            });\n        });\n    }\n    createRectangle() {\n        if (!this.canvas)\n            return;\n        const width = this.canvas.width / 3 > 80 ? 80 : this.canvas.width / 4;\n        const height = this.canvas.height / 4 > 40 ? 40 : this.canvas.height / 8;\n        const w = this.canvas.width / 2;\n        const h = this.canvas.height / 2;\n        const tempBox = this.newBox(w - width / 2, h - height / 2, w + width / 2, h + height / 2);\n        if (tempBox) {\n            this.boxes.push(tempBox);\n            this.updateSelectedArea(this.boxes.length - 1);\n            this.redraw();\n        }\n    }\n    removeAllRectangles() {\n        if (!this.canvas || !this.originalImg)\n            return;\n        this.boxes = [];\n        const ctx = this.canvas.getContext(\"2d\");\n        ctx.drawImage(this.originalImg, 0, 0, this.canvas.width, this.canvas.height);\n    }\n    removeRectangle() {\n        if (this.selectedArea > -1) {\n            this.boxes.splice(this.selectedArea, 1);\n            const selectedArea = this.boxes.length > 0 ? this.boxes.length - 1 : -1;\n            this.updateSelectedArea(selectedArea);\n            this.redraw();\n        }\n    }\n    getOffsetX(e) {\n        var _a;\n        const elBoundingClientRect = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n        return (e.offsetX ||\n            e.touches[0].clientX - elBoundingClientRect.left);\n    }\n    getOffsetY(e) {\n        var _a;\n        const elBoundingClientRect = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n        return (e.offsetY ||\n            e.touches[0].clientY - elBoundingClientRect.top);\n    }\n    redraw() {\n        if (!this.canvas || !this.originalImg)\n            return;\n        const context = this.canvas.getContext(\"2d\");\n        context.drawImage(this.originalImg, 0, 0, this.canvas.width, this.canvas.height);\n        context.beginPath();\n        for (let i = 0; i < this.boxes.length; i++) {\n            this.drawMasking(this.boxes[i], context);\n        }\n    }\n    findArea(x, y, box, i) {\n        const xCenter = box.x1 + (box.x2 - box.x1) / 2;\n        const yCenter = box.y1 + (box.y2 - box.y1) / 2;\n        if (box.x1 - this.lineOffset < x && x < box.x1 + this.lineOffset) {\n            if (box.y1 - this.lineOffset < y && y < box.y1 + this.lineOffset) {\n                return { box: i, pos: \"tl\" };\n            }\n            else if (box.y2 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n                return { box: i, pos: \"bl\" };\n            }\n            else if (yCenter - this.lineOffset < y &&\n                y < yCenter + this.lineOffset) {\n                return { box: i, pos: \"l\" };\n            }\n        }\n        else if (box.x2 - this.lineOffset < x && x < box.x2 + this.lineOffset) {\n            if (box.y1 - this.lineOffset < y && y < box.y1 + this.lineOffset) {\n                return { box: i, pos: \"tr\" };\n            }\n            else if (box.y2 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n                return { box: i, pos: \"br\" };\n            }\n            else if (yCenter - this.lineOffset < y &&\n                y < yCenter + this.lineOffset) {\n                return { box: i, pos: \"r\" };\n            }\n        }\n        else if (xCenter - this.lineOffset < x && x < xCenter + this.lineOffset) {\n            if (box.y1 - this.lineOffset < y && y < box.y1 + this.lineOffset) {\n                return { box: i, pos: \"t\" };\n            }\n            else if (box.y2 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n                return { box: i, pos: \"b\" };\n            }\n            else if (box.y1 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n                return { box: i, pos: \"i\" };\n            }\n        }\n        else if (box.x1 - this.lineOffset < x && x < box.x2 + this.lineOffset) {\n            if (box.y1 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n                return { box: i, pos: \"i\" };\n            }\n        }\n    }\n    findCurrentArea(x, y) {\n        if (this.clickedArea.box != -1) {\n            const box = this.boxes[this.clickedArea.box];\n            const currentArea = this.findArea(x, y, box, this.clickedArea.box);\n            if (currentArea)\n                return currentArea;\n        }\n        for (let i = 0; i < this.boxes.length; i++) {\n            const box = this.boxes[i];\n            const currentArea = this.findArea(x, y, box, i);\n            if (currentArea)\n                return currentArea;\n        }\n        return { box: -1, pos: \"o\" };\n    }\n    newBox(x1, y1, x2, y2) {\n        const boxX1 = x1 < x2 ? x1 : x2;\n        const boxY1 = y1 < y2 ? y1 : y2;\n        const boxX2 = x1 > x2 ? x1 : x2;\n        const boxY2 = y1 > y2 ? y1 : y2;\n        const isNewBox = boxX2 - boxX1 > this.lineOffset * 2 &&\n            boxY2 - boxY1 > this.lineOffset * 2;\n        return isNewBox\n            ? { x1: boxX1, y1: boxY1, x2: boxX2, y2: boxY2 }\n            : undefined;\n    }\n    drawAnchor(context, x, y) {\n        context.beginPath();\n        context.arc(x, y, 3, 0, 2 * Math.PI);\n        context.fillStyle = \"white\";\n        context.fill();\n        context.stroke();\n    }\n    drawMasking(box, context) {\n        if (!this.canvas)\n            return;\n        // draw black rectangle\n        const ctx = this.canvas.getContext(\"2d\");\n        ctx.fillStyle = \"black\";\n        ctx.fillRect(box.x1, box.y1, box.x2 - box.x1, box.y2 - box.y1);\n        // draw the resize rectangle at selected box\n        if (this.selectedArea !== this.boxes.indexOf(box))\n            return;\n        const x1 = box.x1;\n        const y1 = box.y1;\n        const x2 = box.x2;\n        const y2 = box.y2;\n        const xCenter = x1 + (x2 - x1) / 2;\n        const yCenter = y1 + (y2 - y1) / 2;\n        // draw the line\n        context.strokeStyle = \"#E78BFF\";\n        context.rect(x1, y1, x2 - x1, y2 - y1);\n        context.lineWidth = 2;\n        context.stroke();\n        // draw the circle anchor\n        this.drawAnchor(context, x1, y1);\n        this.drawAnchor(context, x1, yCenter);\n        this.drawAnchor(context, x1, y2);\n        this.drawAnchor(context, xCenter, y1);\n        this.drawAnchor(context, xCenter, y2);\n        this.drawAnchor(context, x2, y1);\n        this.drawAnchor(context, x2, yCenter);\n        this.drawAnchor(context, x2, y2);\n    }\n    updateSelectedArea(newVal) {\n        this.selectedArea = newVal;\n        const mainScreen = document.getElementById(this.elementId);\n        const event = new CustomEvent(\"updateSelectedArea\", {\n            detail: { val: newVal },\n        });\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n    }\n    resetSelectedArea() {\n        this.updateSelectedArea(-1);\n        this.redraw();\n    }\n    onMousedown(e, self) {\n        e.preventDefault();\n        self.mousedown = true;\n        self.clickedArea = self.findCurrentArea(self.getOffsetX(e), self.getOffsetY(e));\n        if (self.clickedArea)\n            self.updateSelectedArea(self.clickedArea.box);\n        self.currentCoordinate = {\n            x: self.getOffsetX(e),\n            y: self.getOffsetY(e),\n        };\n        self.redraw();\n    }\n    onMouseup(e, self) {\n        e.preventDefault();\n        this.updateSelectedArea(self.clickedArea.box);\n        if (self.clickedArea.box != -1) {\n            let selectedBox = self.boxes[self.clickedArea.box];\n            if (selectedBox.x1 > selectedBox.x2) {\n                const previousX1 = selectedBox.x1;\n                selectedBox.x1 = selectedBox.x2;\n                selectedBox.x2 = previousX1;\n            }\n            if (selectedBox.y1 > selectedBox.y2) {\n                const previousY1 = selectedBox.y1;\n                selectedBox.y1 = selectedBox.y2;\n                selectedBox.y2 = previousY1;\n            }\n        }\n        self.redraw();\n        self.clickedArea = { box: -1, pos: \"o\" };\n        self.mousedown = false;\n    }\n    isTouchEventWithinEl(e) {\n        var _a;\n        const item = e.clientX\n            ? e\n            : e.changedTouches.item(0);\n        const elBoundingClientRect = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n        if (elBoundingClientRect == null || item == null)\n            return false;\n        return (elBoundingClientRect.right > item.clientX &&\n            elBoundingClientRect.left < item.clientX &&\n            elBoundingClientRect.top < item.clientY &&\n            elBoundingClientRect.bottom > item.clientY);\n    }\n    onMouseOut(e, self) {\n        e.preventDefault();\n        if (self.clickedArea.box !== -1) {\n            let selectedBox = self.boxes[self.clickedArea.box];\n            if (selectedBox.x1 > selectedBox.x2) {\n                const previousX1 = selectedBox.x1;\n                selectedBox.x1 = selectedBox.x2;\n                selectedBox.x2 > previousX1;\n            }\n            if (selectedBox.y1 > selectedBox.y2) {\n                const previousY1 = selectedBox.y1;\n                selectedBox.y1 = selectedBox.y2;\n                selectedBox.y2 > previousY1;\n            }\n        }\n        self.mousedown = false;\n        self.clickedArea = { box: -1, pos: \"o\" };\n    }\n    onMouseMove(e, self) {\n        e.preventDefault();\n        if (!self.mousedown || self.clickedArea.box === -1)\n            return;\n        const x = self.getOffsetX(e);\n        const y = self.getOffsetY(e);\n        const xOffset = x - self.currentCoordinate.x;\n        const yOffset = y - self.currentCoordinate.y;\n        self.currentCoordinate = { x, y };\n        if (self.clickedArea.pos == \"i\" ||\n            self.clickedArea.pos == \"tl\" ||\n            self.clickedArea.pos == \"l\" ||\n            self.clickedArea.pos == \"bl\") {\n            self.boxes[self.clickedArea.box].x1 += xOffset;\n        }\n        if (self.clickedArea.pos == \"i\" ||\n            self.clickedArea.pos == \"tl\" ||\n            self.clickedArea.pos == \"t\" ||\n            self.clickedArea.pos == \"tr\") {\n            self.boxes[self.clickedArea.box].y1 += yOffset;\n        }\n        if (self.clickedArea.pos == \"i\" ||\n            self.clickedArea.pos == \"tr\" ||\n            self.clickedArea.pos == \"r\" ||\n            self.clickedArea.pos == \"br\") {\n            self.boxes[self.clickedArea.box].x2 += xOffset;\n        }\n        if (self.clickedArea.pos == \"i\" ||\n            self.clickedArea.pos == \"bl\" ||\n            self.clickedArea.pos == \"b\" ||\n            self.clickedArea.pos == \"br\") {\n            self.boxes[self.clickedArea.box].y2 += yOffset;\n        }\n        self.redraw();\n    }\n}\nexports[\"default\"] = CardMaskingPlugin;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/card-masking.ts?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nclass CardMaskingPlugin {\n    constructor(elementId) {\n        this.elementId = \"\";\n        this.lineOffset = 10;\n        this.mousedown = false;\n        this.clickedArea = { box: -1, pos: \"o\" };\n        this.selectedArea = -1;\n        this.currentCoordinate = { x: -1, y: -1 };\n        this.boxes = [];\n        this.elementId = elementId;\n    }\n    initCard(htmlCanvas, img, maskedCoordinates = []) {\n        this.canvas = htmlCanvas;\n        this.originalImg = img;\n        // convert the masked coordinates from original image to canvas image\n        const scaleX = this.canvas.width / this.originalImg.width;\n        const scaleY = this.canvas.height / this.originalImg.height;\n        this.boxes = maskedCoordinates.map((box) => ({\n            x1: box.x1 * scaleX,\n            y1: box.y1 * scaleY,\n            x2: box.x2 * scaleX,\n            y2: box.y2 * scaleY,\n        }));\n        // add mouse/touch event\n        this.canvas.addEventListener(\"mousedown\", (e) => this.onMousedown(e, this));\n        this.canvas.addEventListener(\"touchstart\", (e) => this.onMousedown(e, this));\n        this.canvas.addEventListener(\"mouseup\", (e) => this.onMouseup(e, this));\n        this.canvas.addEventListener(\"touchend\", (e) => this.onMouseup(e, this));\n        this.canvas.addEventListener(\"mouseout\", (e) => this.onMouseOut(e, this));\n        this.canvas.addEventListener(\"mousemove\", (e) => this.onMouseMove(e, this));\n        this.canvas.addEventListener(\"touchmove\", (e) => {\n            if (!this.isTouchEventWithinEl(e))\n                return this.onMouseOut(e, this);\n            this.onMouseMove(e, this);\n        });\n    }\n    downloadImage(fullImageSrc) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.originalImg || !this.canvas)\n                return;\n            // Create an Image element\n            const flattenedImg = new Image();\n            flattenedImg.src = fullImageSrc || this.originalImg.src;\n            const self = this;\n            // Wait for the image to load\n            return yield new Promise(function (resolve) {\n                flattenedImg.onload = () => {\n                    if (!self.originalImg || !self.canvas)\n                        return resolve(\"\");\n                    // Calculate the cropped dimensions and offsets\n                    let cropOffsetX = 0;\n                    let cropOffsetY = 0;\n                    if (fullImageSrc) {\n                        cropOffsetX = (flattenedImg.width - self.originalImg.width) / 2;\n                        cropOffsetY = (flattenedImg.height - self.originalImg.height) / 2;\n                    }\n                    // Create a canvas element\n                    const flattenedCanvas = document.createElement(\"canvas\");\n                    const flattenedCtx = flattenedCanvas.getContext(\"2d\");\n                    // Set canvas dimensions\n                    flattenedCanvas.width = flattenedImg.width;\n                    flattenedCanvas.height = flattenedImg.height;\n                    // Draw the original image on the canvas\n                    flattenedCtx.drawImage(flattenedImg, 0, 0);\n                    const scaleX = self.originalImg.width / self.canvas.width;\n                    const scaleY = self.originalImg.height / self.canvas.height;\n                    // Draw the boxes on the canvas\n                    for (let i = 0; i < self.boxes.length; i++) {\n                        const box = self.boxes[i];\n                        const boxX1 = box.x1 * scaleX;\n                        const boxY1 = box.y1 * scaleY;\n                        const height = (box.x2 - box.x1) * scaleX;\n                        const width = (box.y2 - box.y1) * scaleY;\n                        flattenedCtx.fillStyle = \"black\";\n                        flattenedCtx.fillRect(boxX1 + cropOffsetX, boxY1 + cropOffsetY, height, width);\n                    }\n                    // Get the combined image data from the canvas\n                    return resolve(flattenedCanvas.toDataURL(\"image/jpeg\"));\n                };\n            });\n        });\n    }\n    createRectangle() {\n        if (!this.canvas)\n            return;\n        const width = this.canvas.width / 3 > 80 ? 80 : this.canvas.width / 3;\n        const height = this.canvas.height / 4 > 40 ? 40 : this.canvas.height / 4;\n        const w = this.canvas.width / 2;\n        const h = this.canvas.height / 2;\n        const tempBox = this.newBox(w - width / 2, h - height / 2, w + width / 2, h + height / 2);\n        if (tempBox) {\n            this.boxes.push(tempBox);\n            this.updateSelectedArea(this.boxes.length - 1);\n            this.redraw();\n        }\n    }\n    removeAllRectangles() {\n        if (!this.canvas || !this.originalImg)\n            return;\n        this.boxes = [];\n        const ctx = this.canvas.getContext(\"2d\");\n        ctx.drawImage(this.originalImg, 0, 0, this.canvas.width, this.canvas.height);\n    }\n    removeRectangle() {\n        if (this.selectedArea > -1) {\n            this.boxes.splice(this.selectedArea, 1);\n            const selectedArea = this.boxes.length > 0 ? this.boxes.length - 1 : -1;\n            this.updateSelectedArea(selectedArea);\n            this.redraw();\n        }\n    }\n    getOffsetX(e) {\n        var _a;\n        const elBoundingClientRect = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n        return (e.offsetX ||\n            e.touches[0].clientX - elBoundingClientRect.left);\n    }\n    getOffsetY(e) {\n        var _a;\n        const elBoundingClientRect = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n        return (e.offsetY ||\n            e.touches[0].clientY - elBoundingClientRect.top);\n    }\n    redraw() {\n        if (!this.canvas || !this.originalImg)\n            return;\n        const context = this.canvas.getContext(\"2d\");\n        context.drawImage(this.originalImg, 0, 0, this.canvas.width, this.canvas.height);\n        context.beginPath();\n        for (let i = 0; i < this.boxes.length; i++) {\n            this.drawMasking(this.boxes[i], context);\n        }\n    }\n    findArea(x, y, box, i) {\n        const xCenter = box.x1 + (box.x2 - box.x1) / 2;\n        const yCenter = box.y1 + (box.y2 - box.y1) / 2;\n        if (box.x1 - this.lineOffset < x && x < box.x1 + this.lineOffset) {\n            if (box.y1 - this.lineOffset < y && y < box.y1 + this.lineOffset) {\n                return { box: i, pos: \"tl\" };\n            }\n            else if (box.y2 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n                return { box: i, pos: \"bl\" };\n            }\n            else if (yCenter - this.lineOffset < y &&\n                y < yCenter + this.lineOffset) {\n                return { box: i, pos: \"l\" };\n            }\n        }\n        else if (box.x2 - this.lineOffset < x && x < box.x2 + this.lineOffset) {\n            if (box.y1 - this.lineOffset < y && y < box.y1 + this.lineOffset) {\n                return { box: i, pos: \"tr\" };\n            }\n            else if (box.y2 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n                return { box: i, pos: \"br\" };\n            }\n            else if (yCenter - this.lineOffset < y &&\n                y < yCenter + this.lineOffset) {\n                return { box: i, pos: \"r\" };\n            }\n        }\n        else if (xCenter - this.lineOffset < x && x < xCenter + this.lineOffset) {\n            if (box.y1 - this.lineOffset < y && y < box.y1 + this.lineOffset) {\n                return { box: i, pos: \"t\" };\n            }\n            else if (box.y2 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n                return { box: i, pos: \"b\" };\n            }\n            else if (box.y1 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n                return { box: i, pos: \"i\" };\n            }\n        }\n        else if (box.x1 - this.lineOffset < x && x < box.x2 + this.lineOffset) {\n            if (box.y1 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n                return { box: i, pos: \"i\" };\n            }\n        }\n    }\n    findCurrentArea(x, y) {\n        if (this.clickedArea.box != -1) {\n            const box = this.boxes[this.clickedArea.box];\n            const currentArea = this.findArea(x, y, box, this.clickedArea.box);\n            if (currentArea)\n                return currentArea;\n        }\n        for (let i = 0; i < this.boxes.length; i++) {\n            const box = this.boxes[i];\n            const currentArea = this.findArea(x, y, box, i);\n            if (currentArea)\n                return currentArea;\n        }\n        return { box: -1, pos: \"o\" };\n    }\n    newBox(x1, y1, x2, y2) {\n        const boxX1 = x1 < x2 ? x1 : x2;\n        const boxY1 = y1 < y2 ? y1 : y2;\n        const boxX2 = x1 > x2 ? x1 : x2;\n        const boxY2 = y1 > y2 ? y1 : y2;\n        const isNewBox = boxX2 - boxX1 > this.lineOffset * 2 &&\n            boxY2 - boxY1 > this.lineOffset * 2;\n        return isNewBox\n            ? { x1: boxX1, y1: boxY1, x2: boxX2, y2: boxY2 }\n            : undefined;\n    }\n    drawAnchor(context, x, y) {\n        context.beginPath();\n        context.arc(x, y, 3, 0, 2 * Math.PI);\n        context.fillStyle = \"white\";\n        context.fill();\n        context.stroke();\n    }\n    drawMasking(box, context) {\n        if (!this.canvas)\n            return;\n        // draw black rectangle\n        const ctx = this.canvas.getContext(\"2d\");\n        ctx.fillStyle = \"black\";\n        ctx.fillRect(box.x1, box.y1, box.x2 - box.x1, box.y2 - box.y1);\n        // draw the resize rectangle at selected box\n        if (this.selectedArea !== this.boxes.indexOf(box))\n            return;\n        const x1 = box.x1;\n        const y1 = box.y1;\n        const x2 = box.x2;\n        const y2 = box.y2;\n        const xCenter = x1 + (x2 - x1) / 2;\n        const yCenter = y1 + (y2 - y1) / 2;\n        // draw the line\n        context.strokeStyle = \"#E78BFF\";\n        context.rect(x1, y1, x2 - x1, y2 - y1);\n        context.lineWidth = 2;\n        context.stroke();\n        // draw the circle anchor\n        this.drawAnchor(context, x1, y1);\n        this.drawAnchor(context, x1, yCenter);\n        this.drawAnchor(context, x1, y2);\n        this.drawAnchor(context, xCenter, y1);\n        this.drawAnchor(context, xCenter, y2);\n        this.drawAnchor(context, x2, y1);\n        this.drawAnchor(context, x2, yCenter);\n        this.drawAnchor(context, x2, y2);\n    }\n    updateSelectedArea(newVal) {\n        this.selectedArea = newVal;\n        const mainScreen = document.getElementById(this.elementId);\n        const event = new CustomEvent(\"updateSelectedArea\", {\n            detail: { val: newVal },\n        });\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n    }\n    resetSelectedArea() {\n        this.updateSelectedArea(-1);\n        this.redraw();\n    }\n    onMousedown(e, self) {\n        e.preventDefault();\n        self.mousedown = true;\n        self.clickedArea = self.findCurrentArea(self.getOffsetX(e), self.getOffsetY(e));\n        if (self.clickedArea)\n            self.updateSelectedArea(self.clickedArea.box);\n        self.currentCoordinate = {\n            x: self.getOffsetX(e),\n            y: self.getOffsetY(e),\n        };\n        self.redraw();\n    }\n    onMouseup(e, self) {\n        e.preventDefault();\n        this.updateSelectedArea(self.clickedArea.box);\n        if (self.clickedArea.box != -1) {\n            let selectedBox = self.boxes[self.clickedArea.box];\n            if (selectedBox.x1 > selectedBox.x2) {\n                const previousX1 = selectedBox.x1;\n                selectedBox.x1 = selectedBox.x2;\n                selectedBox.x2 = previousX1;\n            }\n            if (selectedBox.y1 > selectedBox.y2) {\n                const previousY1 = selectedBox.y1;\n                selectedBox.y1 = selectedBox.y2;\n                selectedBox.y2 = previousY1;\n            }\n        }\n        self.redraw();\n        self.clickedArea = { box: -1, pos: \"o\" };\n        self.mousedown = false;\n    }\n    isTouchEventWithinEl(e) {\n        var _a;\n        const item = e.clientX\n            ? e\n            : e.changedTouches.item(0);\n        const elBoundingClientRect = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n        if (elBoundingClientRect == null || item == null)\n            return false;\n        return (elBoundingClientRect.right > item.clientX &&\n            elBoundingClientRect.left < item.clientX &&\n            elBoundingClientRect.top < item.clientY &&\n            elBoundingClientRect.bottom > item.clientY);\n    }\n    onMouseOut(e, self) {\n        e.preventDefault();\n        if (self.clickedArea.box !== -1) {\n            let selectedBox = self.boxes[self.clickedArea.box];\n            if (selectedBox.x1 > selectedBox.x2) {\n                const previousX1 = selectedBox.x1;\n                selectedBox.x1 = selectedBox.x2;\n                selectedBox.x2 > previousX1;\n            }\n            if (selectedBox.y1 > selectedBox.y2) {\n                const previousY1 = selectedBox.y1;\n                selectedBox.y1 = selectedBox.y2;\n                selectedBox.y2 > previousY1;\n            }\n        }\n        self.mousedown = false;\n        self.clickedArea = { box: -1, pos: \"o\" };\n    }\n    onMouseMove(e, self) {\n        e.preventDefault();\n        if (!self.mousedown || self.clickedArea.box === -1)\n            return;\n        const x = self.getOffsetX(e);\n        const y = self.getOffsetY(e);\n        const xOffset = x - self.currentCoordinate.x;\n        const yOffset = y - self.currentCoordinate.y;\n        self.currentCoordinate = { x, y };\n        if (self.clickedArea.pos == \"i\" ||\n            self.clickedArea.pos == \"tl\" ||\n            self.clickedArea.pos == \"l\" ||\n            self.clickedArea.pos == \"bl\") {\n            self.boxes[self.clickedArea.box].x1 += xOffset;\n        }\n        if (self.clickedArea.pos == \"i\" ||\n            self.clickedArea.pos == \"tl\" ||\n            self.clickedArea.pos == \"t\" ||\n            self.clickedArea.pos == \"tr\") {\n            self.boxes[self.clickedArea.box].y1 += yOffset;\n        }\n        if (self.clickedArea.pos == \"i\" ||\n            self.clickedArea.pos == \"tr\" ||\n            self.clickedArea.pos == \"r\" ||\n            self.clickedArea.pos == \"br\") {\n            self.boxes[self.clickedArea.box].x2 += xOffset;\n        }\n        if (self.clickedArea.pos == \"i\" ||\n            self.clickedArea.pos == \"bl\" ||\n            self.clickedArea.pos == \"b\" ||\n            self.clickedArea.pos == \"br\") {\n            self.boxes[self.clickedArea.box].y2 += yOffset;\n        }\n        self.redraw();\n    }\n}\nexports[\"default\"] = CardMaskingPlugin;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/card-masking.ts?");
 
 /***/ }),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pipwave-ekyc-uikit",
-  "version": "2.0.0-5",
+  "version": "2.0.0-6",
   "description": "",
   "main": "dist/pw-bundle.js",
   "scripts": {