@aurigma/design-atoms/Input/InputHandler/SelectPixel/SelectPixelInputHandler.js

Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
import { BaseInputHandler } from "../BaseInputHandler";
import { InputState } from "./../../../Input/InputManager/IInputManager";
import Environment from "@aurigma/design-atoms-model/Utils/Environment";
import { EventWithSenderArg } from "@aurigma/design-atoms-model/EventObject";
import { RgbColor } from "@aurigma/design-atoms-model/Colors";
import { Cursor } from "./../../../Utils/Common";
import { PointF, RectangleF, SizeF } from "@aurigma/design-atoms-model/Math";
import { CoordinatesConvertUtils } from "./../../../Utils/CoordinatesConvertUtils";
import { RotateHandler } from "./../../../RotateHandler";
import { Graphics } from "./../../../Graphics";
import { PrintAreaBoundsType } from "@aurigma/design-atoms-model/Product/PrintAreaBoundsType";
import { clamp } from "./../../../Utils/Math";
var SelectPixelInputHandler = /** @class */ (function (_super) {
    __extends(SelectPixelInputHandler, _super);
    function SelectPixelInputHandler(inputManager, _viewer, _canvasElementHandler) {
        var _this = _super.call(this, inputManager) || this;
        _this._viewer = _viewer;
        _this._canvasElementHandler = _canvasElementHandler;
        _this._mobileMode = Environment.IsTouchDevice();
        _this._cursorSize = 10;
        _this._pixelRadius = _this._mobileMode ? 6.5 : 8.5;
        _this._zoom = 10;
        _this._lenseRadius = _this._pixelRadius * _this._zoom;
        _this._textYPosition = 130;
        _this._textPadding = { v: 4, h: 10 };
        _this._buttonsElementMargin = 8;
        _this._lenseCaptured = false;
        _this._onCompletedEvent = new EventWithSenderArg();
        _this._currentColorData = null;
        _this._createButtonsElement = function () {
            var element = document.createElement("div");
            _this._canvas.viewer.whitespaceDiv.appendChild(element);
            element.className = "floating-btn-group btn-group color-select";
            element.style.position = "absolute";
            var rejectButton = document.createElement("button");
            rejectButton.className = "btn btn-default reject-button cc-icon-arrow-close";
            rejectButton.addEventListener("click", _this._onReject);
            element.appendChild(rejectButton);
            var acceptButton = document.createElement("button");
            acceptButton.className = "btn btn-default accept-button cc-icon-check-image";
            acceptButton.addEventListener("click", _this._onAccept);
            element.appendChild(acceptButton);
            _this._buttonsElement = element;
        };
        _this._onAccept = function () {
            _this._onSelectPixelEnd(_this._currentColorData);
        };
        _this._onReject = function () {
            _this._onSelectPixelEnd(null);
        };
        _this._onSelectPixelEnd = function (result) {
            _this._onCompletedEvent.notify(_this, result);
            _this._canvas.viewer.eventManager.selectPixelFinished.notify(result);
            _this._selection.unlock();
        };
        _this._updateCreateButtonsPosition = function () {
            if (_this._buttonsElement == null)
                return;
            var lenseLeft = parseFloat(_this._canvasLensElement.style.left);
            var lenseTop = parseFloat(_this._canvasLensElement.style.top);
            var lenseWidth = parseFloat(_this._canvasLensElement.style.height);
            var lenseHeight = parseFloat(_this._canvasLensElement.style.height);
            var buttonElementRect = _this._buttonsElement.getBoundingClientRect();
            _this._buttonsElement.style.left = (lenseLeft + lenseWidth / 2 - buttonElementRect.width / 2) + "px";
            var buttonsElementTop = lenseTop - buttonElementRect.height - _this._buttonsElementMargin;
            if (lenseTop - buttonElementRect.height - _this._buttonsElementMargin <= 0) {
                buttonsElementTop = lenseTop + lenseHeight + _this._buttonsElementMargin;
            }
            _this._buttonsElement.style.top = buttonsElementTop + "px";
        };
        _this._updateView = function (point) {
            if (point === void 0) { point = null; }
            var targetPoint = point || _this._currentPoint;
            _this._updateLensImage(targetPoint);
            _this._changePosition(targetPoint);
            if (_this._mobileMode)
                _this._updateCreateButtonsPosition();
        };
        _this._createLensCanvas = function () {
            var canvasElement = document.createElement("canvas");
            canvasElement.width = _this._lenseRadius * 2;
            canvasElement.height = _this._lenseRadius * 2;
            canvasElement.style.width = _this._lenseRadius * 2 + "px";
            canvasElement.style.height = _this._lenseRadius * 2 + "px";
            canvasElement.style.position = "absolute";
            canvasElement.style.borderRadius = _this._lenseRadius + "px";
            canvasElement.style.borderWidth = "1px";
            canvasElement.style.borderColor = "rgb(0,0,0,0.7)";
            canvasElement.style.borderStyle = "solid";
            canvasElement.style.userSelect = "none";
            canvasElement.tabIndex = -1;
            canvasElement.addEventListener("keydown", _this._onKeyDown);
            var context = canvasElement.getContext("2d");
            context.imageSmoothingEnabled = false;
            context.imageSmoothingQuality = "low";
            setTimeout(function () { return canvasElement.focus(); });
            return canvasElement;
        };
        _this._onKeyDown = function (event) {
            // if ESC
            if (event.keyCode === 27)
                _this._onReject();
        };
        // Select pixel needs one canvas as input, and we can reach this goal if call clear selection command.
        var cv = _this._viewer.canvas;
        _this._viewer.setCursor(Cursor.cross);
        cv.selection.lock(true);
        _this._viewer.ignoreDocumentClickOnce();
        if (!_this._mobileMode)
            return _this;
        _this._canvasLensElement = _this._createLensCanvas();
        _this._canvasElementHandler.addChild(_this._canvasLensElement);
        _this._createButtonsElement();
        _this._putLenseOnWhitespaceCenter();
        cv.viewer.add_onResize(_this._updateView);
        return _this;
    }
    Object.defineProperty(SelectPixelInputHandler.prototype, "_canvas", {
        get: function () {
            return this._viewer.canvas;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(SelectPixelInputHandler.prototype, "_selection", {
        get: function () {
            return this._viewer.canvas.selection;
        },
        enumerable: true,
        configurable: true
    });
    SelectPixelInputHandler.prototype._onClick = function (params) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                if (params.isMobile)
                    return [2 /*return*/];
                this._canvas.viewer.ignoreDocumentClickOnce();
                this._updateView(params.page);
                this._onAccept();
                return [2 /*return*/];
            });
        });
    };
    SelectPixelInputHandler.prototype._onMove = function (params) {
        return __awaiter(this, void 0, void 0, function () {
            var canvasLensCenter, wsPoint, distance;
            return __generator(this, function (_a) {
                if (!params.isMobile)
                    return [2 /*return*/];
                switch (params.state) {
                    case InputState.Started:
                        canvasLensCenter = new PointF(parseInt(this._canvasLensElement.style.left) + this._lenseRadius, parseInt(this._canvasLensElement.style.top) + this._lenseRadius);
                        wsPoint = CoordinatesConvertUtils.pageToControlPoint(params.startPage, this._viewer);
                        distance = Math.sqrt(Math.pow(wsPoint.x - canvasLensCenter.x, 2) +
                            Math.pow(wsPoint.y - canvasLensCenter.y, 2));
                        if (distance < this._lenseRadius) {
                            this._lenseCaptured = true;
                            this._capturedPoint = params.startPage.clone();
                            this._moveLenseByNewPoint(params.page);
                        }
                        break;
                    case InputState.InProgress:
                        if (this._lenseCaptured)
                            this._moveLenseByNewPoint(params.page);
                        break;
                    case InputState.Finished:
                        if (!this._lenseCaptured)
                            return [2 /*return*/];
                        this._lenseCaptured = false;
                        this._currentPoint = new PointF(this._currentPoint.x + params.page.x - this._capturedPoint.x, this._currentPoint.y + params.page.y - this._capturedPoint.y);
                        this._capturedPoint = null;
                        break;
                }
                return [2 /*return*/];
            });
        });
    };
    SelectPixelInputHandler.prototype._moveLenseByNewPoint = function (point) {
        var newPoint = new PointF(this._currentPoint.x + point.x - this._capturedPoint.x, this._currentPoint.y + point.y - this._capturedPoint.y);
        this._updateView(newPoint);
    };
    SelectPixelInputHandler.prototype._onHover = function (params) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                if (this._canvasLensElement == null) {
                    this._canvasLensElement = this._createLensCanvas();
                    this._canvasElementHandler.addChild(this._canvasLensElement);
                }
                this._updateView(params.page);
                return [2 /*return*/];
            });
        });
    };
    SelectPixelInputHandler.prototype._onKey = function (params) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                if (params.state === InputState.Finished && params.code === "Escape")
                    this._onReject();
                return [2 /*return*/];
            });
        });
    };
    SelectPixelInputHandler.prototype.addOnCompleted = function (handler) { this._onCompletedEvent.add(handler); };
    SelectPixelInputHandler.prototype.removeOnCompleted = function (handler) { this._onCompletedEvent.remove(handler); };
    SelectPixelInputHandler.prototype._putLenseOnWhitespaceCenter = function () {
        var vw = this._canvas.viewer;
        var wsDiv = vw.whitespaceDiv;
        var whitespaceCenter = new PointF(wsDiv.offsetWidth / 2, wsDiv.offsetHeight / 2);
        var point = CoordinatesConvertUtils.whitespaceToWorkspacePoint(whitespaceCenter, vw);
        this._currentPoint = point;
        this._updateView();
    };
    SelectPixelInputHandler.prototype._calculateLensBounds = function () {
        var whitespaceDiv = this._canvas.viewer.whitespaceDiv;
        var viewportDiv = this._canvas.viewer.viewportDiv;
        var wsClientRect = whitespaceDiv.getBoundingClientRect();
        var vpClientRect = viewportDiv.getBoundingClientRect();
        var left = wsClientRect.left < vpClientRect.left ? vpClientRect.left - wsClientRect.left : 0;
        var right = left + vpClientRect.width;
        var top = wsClientRect.top < vpClientRect.top ? vpClientRect.top - wsClientRect.top : 0;
        var bottom = top + vpClientRect.height;
        return { left: left, top: top, right: right, bottom: bottom };
    };
    SelectPixelInputHandler.prototype._changePosition = function (point) {
        var vw = this._canvas.viewer;
        var whitespaceCoord = CoordinatesConvertUtils.pageToWhitespace(point, vw);
        var diameter = this._lenseRadius * 2;
        var whitespaceDiv = vw.whitespaceDiv;
        if (this._mobileMode) {
            this._canvasLensElement.style.left =
                clamp(whitespaceCoord.x, this._lenseRadius, whitespaceDiv.offsetWidth - this._lenseRadius) - this._lenseRadius + "px";
            this._canvasLensElement.style.top =
                clamp(whitespaceCoord.y, this._lenseRadius, whitespaceDiv.offsetHeight - this._lenseRadius) - this._lenseRadius + "px";
        }
        else {
            var bounds = this._calculateLensBounds();
            var left = void 0;
            var top_1;
            if (whitespaceCoord.x + this._cursorSize + diameter < bounds.right)
                left = whitespaceCoord.x + this._cursorSize;
            else
                left = whitespaceCoord.x - this._cursorSize - diameter;
            if (whitespaceCoord.y + this._cursorSize + diameter < bounds.bottom)
                top_1 = whitespaceCoord.y + this._cursorSize;
            else
                top_1 = whitespaceCoord.y - this._cursorSize - diameter;
            left = Math.max(left, bounds.left);
            left = Math.min(left, bounds.right - diameter);
            top_1 = Math.max(top_1, bounds.top);
            top_1 = Math.min(top_1, bounds.bottom - diameter);
            this._canvasLensElement.style.left = left + "px";
            this._canvasLensElement.style.top = top_1 + "px";
        }
    };
    SelectPixelInputHandler.prototype._updateLensImage = function (point) {
        var vw = this._canvas.viewer;
        var size = this._pixelRadius * 2;
        var contentPoint = CoordinatesConvertUtils.pageToControlPoint(point, vw);
        var rulerWidth = this._canvas.viewer.actualRulerWidth;
        contentPoint.translate(-rulerWidth, -rulerWidth);
        contentPoint.x *= window.devicePixelRatio;
        contentPoint.y *= window.devicePixelRatio;
        var lenseSize = this._lenseRadius * 2;
        var rect = new RectangleF(contentPoint.x - Math.trunc(this._pixelRadius), contentPoint.y - Math.trunc(this._pixelRadius) + 1, size, size);
        /*  rect.x += this._canvas.offset.x;
         rect.y += this._canvas.offset.y; */
        var ctx = this._canvasElementHandler.viewportSurfaceCanvas.getContext("2d");
        var imageData = ctx.getImageData(rect.left, rect.top, rect.width, rect.height);
        var middle = Math.trunc(size / 2);
        var lensContext = this._canvasLensElement.getContext("2d");
        lensContext.resetTransform();
        Graphics.clearCanvas(lensContext);
        var data = imageData.data;
        var canvasSize = new SizeF(size, size);
        for (var i = 0; i < data.length; i += 4) {
            var colorIndex = i / 4;
            var rowNum = Math.trunc(colorIndex / size);
            var columnNum = colorIndex % size;
            var alpha = data[i + 3] / 255;
            var whitePart = 255 * (1 - alpha);
            var cd = {
                r: Math.min(Math.round(data[i] * alpha + whitePart), 255),
                g: Math.min(Math.round(data[i + 1] * alpha + whitePart), 255),
                b: Math.min(Math.round(data[i + 2] * alpha + whitePart), 255)
            };
            lensContext.fillStyle = "rgba(" + cd.r + "," + cd.g + "," + cd.b + ")";
            var rotatedPoint = RotateHandler.getRotatedPointFromSize(new PointF(columnNum, rowNum), canvasSize, 0);
            lensContext.fillRect(rotatedPoint.x * this._zoom, rotatedPoint.y * this._zoom, this._zoom, this._zoom);
            if (middle === rowNum && middle === columnNum) {
                this._currentColorData = new RgbColor(cd.r, cd.g, cd.b, 255);
            }
        }
        for (var i = 0; i < size; i++) {
            Graphics.drawLine(lensContext, i * this._zoom, 0, i * this._zoom, lenseSize, 1, "black", 0.15);
            Graphics.drawLine(lensContext, 0, i * this._zoom, lenseSize, i * this._zoom, 1, "black", 0.15);
        }
        ctx.globalAlpha = 1;
        lensContext.lineWidth = 1;
        lensContext.strokeStyle = "#000";
        lensContext.strokeRect(middle * this._zoom, middle * this._zoom, this._zoom, this._zoom);
        lensContext.strokeStyle = "#fff";
        lensContext.strokeRect(middle * this._zoom - 1, middle * this._zoom - 1, this._zoom + 2, this._zoom + 2);
        var bounds = this._canvas.viewer.surfaceHandler.getBounds(PrintAreaBoundsType.Total);
        if (!bounds.contains(point, true)) {
            /*this._currentColorData = null;
            console.log(`_currentColorData => null`);
            return;*/
        }
        if (this._mobileMode)
            return;
        var dt = this._currentColorData;
        var colorString = "RGB: " + dt.r + " " + dt.g + " " + dt.b;
        var stringWidth = ctx.measureText(colorString).width;
        lensContext.font = "10px Roboto";
        lensContext.fillStyle = "black";
        var textLeft = (lenseSize - stringWidth) / 2;
        lensContext.fillStyle = "rgba(0, 0, 0, 0.7)";
        Graphics.drawRoundedRectangle(lensContext, new RectangleF(textLeft - this._textPadding.h, this._textYPosition - 10, stringWidth + this._textPadding.h * 2, 20), 10);
        lensContext.fillStyle = "white";
        lensContext.fillText(colorString, textLeft + 2, this._textYPosition + 3, lenseSize);
    };
    SelectPixelInputHandler.prototype.dispose = function () {
        _super.prototype.dispose.call(this);
        this._viewer.setCursor(Cursor.defaultCursor);
        if (this._buttonsElement != null) {
            this._buttonsElement.querySelector(".accept-button").removeEventListener("click", this._onAccept);
            this._buttonsElement.querySelector(".accept-button").removeEventListener("touchend", this._onAccept);
            this._buttonsElement.querySelector(".reject-button").removeEventListener("click", this._onAccept);
            this._buttonsElement.querySelector(".reject-button").removeEventListener("touchend", this._onAccept);
            this._buttonsElement.remove();
        }
        if (this._canvasLensElement != null) {
            this._canvasLensElement.removeEventListener("keydown", this._onKeyDown);
            this._canvasLensElement.remove();
        }
        this._viewer.remove_onResize(this._updateView);
    };
    SelectPixelInputHandler.prototype._onLongTap = function (params) {
        return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
            return [2 /*return*/];
        }); });
    };
    SelectPixelInputHandler.prototype._onTransform = function (params) {
        return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
            return [2 /*return*/];
        }); });
    };
    SelectPixelInputHandler.prototype._onWheel = function (params) {
        return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
            return [2 /*return*/];
        }); });
    };
    SelectPixelInputHandler.prototype._onPointerDown = function (params) {
        return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
            return [2 /*return*/];
        }); });
    };
    SelectPixelInputHandler.prototype._onDoubleClick = function (params) {
        return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
            return [2 /*return*/];
        }); });
    };
    return SelectPixelInputHandler;
}(BaseInputHandler));
export { SelectPixelInputHandler };
//# sourceMappingURL=SelectPixelInputHandler.js.map