@opentiny/fluent-editor
Version:
A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It's powerful and out-of-the-box.
174 lines (173 loc) • 6.64 kB
JavaScript
"use strict";
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const action = require("./action.cjs.js");
const MIN_WIDTH = 40;
function getElementStyle(element) {
return element.currentStyle ? element.currentStyle : window.getComputedStyle(element, null);
}
class CustomResizeAction extends action.Action {
constructor(formatter) {
super(formatter);
__publicField(this, "topLeftHandle");
__publicField(this, "topRightHandle");
__publicField(this, "bottomRightHandle");
__publicField(this, "bottomLeftHandle");
__publicField(this, "dragHandle");
__publicField(this, "dragStartX");
__publicField(this, "preDragWidth");
__publicField(this, "targetRatio");
__publicField(this, "maxWidth");
__publicField(this, "minWidth");
__publicField(this, "onMouseDown", (event) => {
if (!(event.target instanceof HTMLElement)) {
return;
}
this.dragHandle = event.target;
this.setCursor(this.dragHandle.style.cursor);
if (!this.formatter.currentSpec) {
return;
}
const target = this.formatter.currentSpec.getTargetElement();
if (!target) {
return;
}
event.preventDefault();
const rect = target.getBoundingClientRect();
this.dragStartX = event.clientX;
this.preDragWidth = rect.width;
this.targetRatio = rect.height / rect.width;
let root;
let rootStyle;
const tdWrap = this.findTd(target, 0);
if (tdWrap) {
root = tdWrap;
rootStyle = getElementStyle(tdWrap);
} else {
root = this.formatter.quill.root;
rootStyle = getElementStyle(root);
}
this.maxWidth = root.clientWidth - Number.parseFloat(rootStyle.paddingRight) - Number.parseFloat(rootStyle.paddingLeft);
document.addEventListener("mousemove", this.onDrag);
document.addEventListener("mouseup", this.onMouseUp);
});
__publicField(this, "findTd", (node, level) => {
if (level > 3) {
return null;
}
const tagName = node.tagName.toUpperCase();
if (tagName === "TD") {
return node;
} else {
const parentNode = node.parentElement;
if (parentNode) {
return this.findTd(parentNode, level += 1);
} else {
return null;
}
}
});
__publicField(this, "onDrag", (event) => {
if (!this.formatter.currentSpec) {
return;
}
const target = this.formatter.currentSpec.getTargetElement();
if (!target) {
return;
}
const deltaX = event.clientX - this.dragStartX;
let newWidth = 0;
if (this.dragHandle === this.topLeftHandle || this.dragHandle === this.bottomLeftHandle) {
newWidth = Math.round(this.preDragWidth - deltaX);
} else {
newWidth = Math.round(this.preDragWidth + deltaX);
}
let minWidth = this.minWidth;
if (this.maxWidth < minWidth) {
minWidth = this.maxWidth;
}
if (newWidth > this.maxWidth) {
newWidth = this.maxWidth;
} else if (newWidth < minWidth) {
newWidth = minWidth;
}
const newHeight = this.targetRatio * newWidth;
target.setAttribute("width", `${newWidth}`);
target.setAttribute("height", `${newHeight}`);
this.formatter.update();
});
__publicField(this, "onMouseUp", () => {
this.setCursor("");
document.removeEventListener("mousemove", this.onDrag);
document.removeEventListener("mouseup", this.onMouseUp);
});
this.topLeftHandle = this.createHandle("top-left", "nwse-resize");
this.topRightHandle = this.createHandle("top-right", "nesw-resize");
this.bottomRightHandle = this.createHandle("bottom-right", "nwse-resize");
this.bottomLeftHandle = this.createHandle("bottom-left", "nesw-resize");
this.dragHandle = null;
this.dragStartX = 0;
this.preDragWidth = 0;
this.targetRatio = 0;
this.maxWidth = 0;
this.minWidth = MIN_WIDTH;
}
onCreate() {
const target = this.formatter.currentSpec.getTargetElement();
this.formatter.overlay.setAttribute("data-image", target.src);
this.formatter.overlay.appendChild(this.topLeftHandle);
this.formatter.overlay.appendChild(this.topRightHandle);
this.formatter.overlay.appendChild(this.bottomRightHandle);
this.formatter.overlay.appendChild(this.bottomLeftHandle);
this.repositionHandles(this.formatter.options.resize.handleStyle);
}
onDestroy() {
this.setCursor("");
this.formatter.overlay.removeChild(this.topLeftHandle);
this.formatter.overlay.removeChild(this.topRightHandle);
this.formatter.overlay.removeChild(this.bottomRightHandle);
this.formatter.overlay.removeChild(this.bottomLeftHandle);
}
createHandle(position, cursor) {
const box = document.createElement("div");
box.classList.add(this.formatter.options.resize.handleClassName);
box.setAttribute("data-position", position);
box.style.cursor = cursor;
if (this.formatter.options.resize.handleStyle) {
Object.assign(box.style, this.formatter.options.resize.handleStyle);
}
box.addEventListener("mousedown", this.onMouseDown);
return box;
}
repositionHandles(handleStyle) {
let handleXOffset = "0px";
let handleYOffset = "0px";
if (handleStyle) {
if (handleStyle.width) {
handleXOffset = `${-Number.parseFloat(handleStyle.width) / 2}px`;
}
if (handleStyle.height) {
handleYOffset = `${-Number.parseFloat(handleStyle.height) / 2}px`;
}
}
Object.assign(this.topLeftHandle.style, { left: handleXOffset, top: handleYOffset });
Object.assign(this.topRightHandle.style, { right: handleXOffset, top: handleYOffset });
Object.assign(this.bottomRightHandle.style, { right: handleXOffset, bottom: handleYOffset });
Object.assign(this.bottomLeftHandle.style, { left: handleXOffset, bottom: handleYOffset });
}
setCursor(value) {
if (document.body) {
document.body.style.cursor = value;
}
if (this.formatter.currentSpec) {
const target = this.formatter.currentSpec.getOverlayElement();
if (target) {
target.style.cursor = value;
}
}
}
}
exports.CustomResizeAction = CustomResizeAction;
//# sourceMappingURL=custom-resize-action.cjs.js.map