130 lines
3.6 KiB
TypeScript
130 lines
3.6 KiB
TypeScript
import { BaseElement } from "../../../shared/_base";
|
|
import { CodeEditor } from "../code-editor/code-editor";
|
|
import './resize-handle.less';
|
|
|
|
export class ResizeHandle extends BaseElement {
|
|
|
|
|
|
onInit(): void {
|
|
this.setDragEvents();
|
|
}
|
|
|
|
setDragEvents() {
|
|
this.addEventListener("mousedown", (evt: MouseEvent) => {
|
|
evt.preventDefault();
|
|
evt.stopPropagation();
|
|
this.setOverlay({
|
|
x: evt.pageX,
|
|
y: evt.pageY
|
|
});
|
|
|
|
});
|
|
|
|
this.addEventListener("touchstart", (evt: TouchEvent) => {
|
|
evt.preventDefault();
|
|
evt.stopPropagation();
|
|
this.setOverlay({
|
|
x: evt.touches[0].pageX,
|
|
y: evt.touches[0].pageY
|
|
});
|
|
});
|
|
}
|
|
|
|
setSize(x: number, y: number) {
|
|
var t = this.getTarget();
|
|
|
|
if (t) {
|
|
if (this.directionIsHorizontal()) {
|
|
t.style.minWidth = x + "px";
|
|
t.style.maxWidth = x + "px";
|
|
}
|
|
else {
|
|
t.style.minHeight = y + "px";
|
|
t.style.maxHeight = y + "px";
|
|
}
|
|
}
|
|
}
|
|
|
|
getTarget() {
|
|
var targetAttr = this.getAttribute("target");
|
|
if (targetAttr) {
|
|
var target = <HTMLElement>document.querySelector(targetAttr);
|
|
|
|
if (target) {
|
|
return target;
|
|
}
|
|
}
|
|
|
|
return this.parentElement;
|
|
}
|
|
|
|
directionIsHorizontal() {
|
|
var attr = this.getAttribute("dir");
|
|
|
|
if (attr) {
|
|
if (attr.toLowerCase().indexOf('v') === 0) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
getIframe() {
|
|
return <HTMLIFrameElement>this.find("iframe");
|
|
}
|
|
|
|
setOverlay(start: { x: number, y: number }) {
|
|
var overlay = document.createElement("div");
|
|
overlay.setAttribute("id", "fixed-resize-overlay");
|
|
|
|
var targetStartSize = { width: 0, height: 0 };
|
|
|
|
var target = this.getTarget();
|
|
if (target) {
|
|
var bounds = target.getBoundingClientRect();
|
|
|
|
targetStartSize = {
|
|
width: bounds.width,
|
|
height: bounds.height
|
|
};
|
|
}
|
|
|
|
overlay.addEventListener("mousemove", (evt: MouseEvent) => {
|
|
this.getIframe().style.pointerEvents = "none";
|
|
this.classList.add("active");
|
|
this.setSize(targetStartSize.width + (evt.pageX - start.x), targetStartSize.height + (evt.pageY - start.y));
|
|
});
|
|
|
|
overlay.addEventListener("mouseup", (evt: MouseEvent) => {
|
|
this.getIframe().style.pointerEvents = "all";
|
|
this.classList.remove("active");
|
|
this.removeOverlay();
|
|
});
|
|
|
|
overlay.addEventListener("touchmove", (evt: TouchEvent) => {
|
|
this.getIframe().style.pointerEvents = "none";
|
|
this.classList.add("active");
|
|
this.setSize(targetStartSize.width + (start.x - evt.touches[0].pageX), targetStartSize.height + (start.y - evt.touches[0].pageY));
|
|
});
|
|
|
|
overlay.addEventListener("touchend", (evt: TouchEvent) => {
|
|
this.getIframe().style.pointerEvents = "all";
|
|
this.classList.remove("active");
|
|
this.removeOverlay();
|
|
});
|
|
|
|
document.body.classList.remove("animate");
|
|
document.body.appendChild(overlay);
|
|
}
|
|
|
|
removeOverlay() {
|
|
var overlay = document.getElementById("fixed-resize-overlay");
|
|
|
|
if (overlay) {
|
|
overlay.parentElement?.removeChild(overlay);
|
|
}
|
|
|
|
document.body.classList.add("animate");
|
|
}
|
|
} |