VLEX/BPM-UI/node_modules/devextreme/ui/html_editor/modules/resizing.js

/**
 * DevExtreme (ui/html_editor/modules/resizing.js)
 * Version: 19.1.16
 * Build date: Tue Oct 18 2022
 *
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
var _renderer = require("../../../core/renderer");
var _renderer2 = _interopRequireDefault(_renderer);
var _events_engine = require("../../../events/core/events_engine");
var _events_engine2 = _interopRequireDefault(_events_engine);
var _click = require("../../../events/click");
var _utils = require("../../../events/utils");
var _translator = require("../../../animation/translator");
var _devices = require("../../../core/devices");
var _devices2 = _interopRequireDefault(_devices);
var _resizable = require("../../resizable");
var _resizable2 = _interopRequireDefault(_resizable);
var _quill = require("quill");
var _quill2 = _interopRequireDefault(_quill);

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        "default": obj
    }
}

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function")
    }
}

function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) {
            descriptor.writable = true
        }
        Object.defineProperty(target, descriptor.key, descriptor)
    }
}

function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) {
        _defineProperties(Constructor.prototype, protoProps)
    }
    if (staticProps) {
        _defineProperties(Constructor, staticProps)
    }
    Object.defineProperty(Constructor, "prototype", {
        writable: false
    });
    return Constructor
}
var DX_RESIZE_FRAME_CLASS = "dx-resize-frame";
var DX_TOUCH_DEVICE_CLASS = "dx-touch-device";
var MODULE_NAMESPACE = "dxHtmlResizingModule";
var KEYDOWN_EVENT = (0, _utils.addNamespace)("keydown", MODULE_NAMESPACE);
var SCROLL_EVENT = (0, _utils.addNamespace)("scroll", MODULE_NAMESPACE);
var FRAME_PADDING = 1;
var ResizingModule = function() {
    function ResizingModule(quill, options) {
        _classCallCheck(this, ResizingModule);
        this.quill = quill;
        this.editorInstance = options.editorInstance;
        this.allowedTargets = options.allowedTargets || ["image"];
        this.enabled = !!options.enabled;
        if (this.enabled) {
            this._attachEvents();
            this._createResizeFrame()
        }
    }
    _createClass(ResizingModule, [{
        key: "_attachEvents",
        value: function() {
            _events_engine2.default.on(this.quill.root, (0, _utils.addNamespace)(_click.name, MODULE_NAMESPACE), this._clickHandler.bind(this));
            _events_engine2.default.on(this.quill.root, SCROLL_EVENT, this._scrollHandler.bind(this))
        }
    }, {
        key: "_detachEvents",
        value: function() {
            _events_engine2.default.off(this.quill.root, MODULE_NAMESPACE)
        }
    }, {
        key: "_clickHandler",
        value: function(e) {
            if (this._isAllowedTarget(e.target)) {
                if (this._$target === e.target) {
                    return
                }
                this._$target = e.target;
                this.updateFramePosition();
                this.showFrame()
            } else {
                if (this._$target) {
                    this.hideFrame()
                }
            }
        }
    }, {
        key: "_scrollHandler",
        value: function(e) {
            if (this._$target) {
                this.updateFramePosition()
            }
        }
    }, {
        key: "_isAllowedTarget",
        value: function(targetElement) {
            return this._isImage(targetElement)
        }
    }, {
        key: "_isImage",
        value: function(targetElement) {
            return this.allowedTargets.indexOf("image") !== -1 && "IMG" === targetElement.tagName.toUpperCase()
        }
    }, {
        key: "showFrame",
        value: function() {
            this._$resizeFrame.show();
            _events_engine2.default.on(this.quill.root, KEYDOWN_EVENT, this._handleFrameKeyDown.bind(this))
        }
    }, {
        key: "_handleFrameKeyDown",
        value: function(e) {
            var keyName = (0, _utils.normalizeKeyName)(e);
            if ("del" === keyName || "backspace" === keyName) {
                this._deleteImage()
            }
            this.hideFrame()
        }
    }, {
        key: "hideFrame",
        value: function() {
            this._$target = null;
            this._$resizeFrame.hide();
            _events_engine2.default.off(this.quill.root, KEYDOWN_EVENT)
        }
    }, {
        key: "updateFramePosition",
        value: function() {
            var _this$_$target$getBou = this._$target.getBoundingClientRect(),
                height = _this$_$target$getBou.height,
                width = _this$_$target$getBou.width,
                targetTop = _this$_$target$getBou.top,
                targetLeft = _this$_$target$getBou.left;
            var _this$quill$root$getB = this.quill.root.getBoundingClientRect(),
                containerTop = _this$quill$root$getB.top,
                containerLeft = _this$quill$root$getB.left;
            var borderWidth = this._getBorderWidth();
            this._$resizeFrame.css({
                height: height,
                width: width,
                padding: FRAME_PADDING,
                top: targetTop - containerTop - borderWidth - FRAME_PADDING,
                left: targetLeft - containerLeft - borderWidth - FRAME_PADDING
            });
            (0, _translator.move)(this._$resizeFrame, {
                left: 0,
                top: 0
            })
        }
    }, {
        key: "_getBorderWidth",
        value: function() {
            return parseInt(this._$resizeFrame.css("borderTopWidth"))
        }
    }, {
        key: "_createResizeFrame",
        value: function() {
            var _this = this;
            if (this._$resizeFrame) {
                return
            }
            var _devices$current = _devices2.default.current(),
                deviceType = _devices$current.deviceType;
            this._$resizeFrame = (0, _renderer2.default)("<div>").addClass(DX_RESIZE_FRAME_CLASS).toggleClass(DX_TOUCH_DEVICE_CLASS, "desktop" !== deviceType).appendTo(this.editorInstance._getQuillContainer()).hide();
            this.editorInstance._createComponent(this._$resizeFrame, _resizable2.default, {
                onResize: function(e) {
                    if (!_this._$target) {
                        return
                    }
                    var correction = 2 * (FRAME_PADDING + _this._getBorderWidth());
                    (0, _renderer2.default)(_this._$target).attr({
                        height: e.height - correction,
                        width: e.width - correction
                    });
                    _this.updateFramePosition()
                }
            })
        }
    }, {
        key: "_deleteImage",
        value: function() {
            if (this._isAllowedTarget(this._$target)) {
                _quill2.default.find(this._$target).deleteAt(0)
            }
        }
    }, {
        key: "option",
        value: function(_option, value) {
            var _this2 = this;
            if ("mediaResizing" === _option) {
                Object.keys(value).forEach(function(optionName) {
                    return _this2.option(optionName, value[optionName])
                });
                return
            }
            if ("enabled" === _option) {
                this.enabled = value;
                value ? this._attachEvents() : this._detachEvents()
            } else {
                if ("allowedTargets" === _option && Array.isArray(value)) {
                    this.allowedTargets = value
                }
            }
        }
    }, {
        key: "clean",
        value: function() {
            this._detachEvents();
            this._$resizeFrame.remove();
            this._$resizeFrame = void 0
        }
    }]);
    return ResizingModule
}();
exports.default = ResizingModule;