rkgk/static/resize-handle.js
liquidex 255511ac16 give the brush editor resize handle a maximum size
this is to prevent the size from going negative, which fucks a lot of things up (you end up not being able to drag it anymore 💀)
2024-09-03 22:53:55 +02:00

71 lines
2.3 KiB
JavaScript

import { listen } from "./framework.js";
export class ResizeHandle extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.direction = this.getAttribute("data-direction");
this.targetId = this.getAttribute("data-target");
this.target = document.getElementById(this.targetId);
this.targetProperty = this.getAttribute("data-target-property");
this.initSize = parseInt(this.getAttribute("data-init-size"));
this.minSize = parseInt(this.getAttribute("data-min-size"));
this.#setSize(parseInt(localStorage.getItem(this.#localStorageKey)));
this.#saveSize();
this.#updateTargetProperty();
this.visual = this.appendChild(document.createElement("div"));
this.visual.classList.add("visual");
this.#draggingBehaviour();
}
#setSize(newSize) {
if (newSize != newSize) {
this.size = this.initSize;
}
this.size = Math.max(this.minSize, newSize);
}
get #localStorageKey() {
return `rkgk.resizeHandle.size.${this.targetId}`;
}
#saveSize() {
localStorage.setItem(this.#localStorageKey, this.size);
}
#updateTargetProperty() {
this.target.style.setProperty(this.targetProperty, `${this.size}px`);
}
async #draggingBehaviour() {
while (true) {
let mouseDown = await listen([this, "mousedown"]);
let startingSize = this.size;
if (mouseDown.button == 0) {
this.classList.add("dragging");
while (true) {
let event = await listen([window, "mousemove"], [window, "mouseup"]);
if (event.type == "mousemove") {
if (this.direction == "vertical") {
this.#setSize(startingSize + (mouseDown.clientX - event.clientX));
}
this.#updateTargetProperty();
} else if (event.type == "mouseup") {
this.classList.remove("dragging");
this.#saveSize();
break;
}
}
}
}
}
}
customElements.define("rkgk-resize-handle", ResizeHandle);