liquidex/rkgk
liquidex/rkgk
1
Fork 0
Code Issues 66 Pull requests Projects 1 Wiki Activity

give the brush editor resize handle a maximum size

Browse source 
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 💀)
This commit is contained in:
liquidex 2024-09-03 22:52:12 +02:00
parent 740a62447e
commit 255511ac16
2 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
static/index.html
View file

@ -55,7 +55,8 @@
data-direction="vertical" data-direction="vertical"
data-target="panels-overlay" data-target="panels-overlay"
data-target-property="--right-width" data-target-property="--right-width"
data-init-size="384"></rkgk-resize-handle> data-init-size="384"
data-min-size="128"></rkgk-resize-handle>
<rkgk-brush-editor></rkgk-brush-editor> <rkgk-brush-editor></rkgk-brush-editor>
</div> </div>
</div> </div>

17
static/resize-handle.js
View file

@ -11,12 +11,10 @@ export class ResizeHandle extends HTMLElement {
this.target = document.getElementById(this.targetId); this.target = document.getElementById(this.targetId);
this.targetProperty = this.getAttribute("data-target-property"); this.targetProperty = this.getAttribute("data-target-property");
this.initSize = parseInt(this.getAttribute("data-init-size")); this.initSize = parseInt(this.getAttribute("data-init-size"));
this.minSize = parseInt(this.getAttribute("data-min-size"));
this.size = parseInt(localStorage.getItem(this.#localStorageKey)); this.#setSize(parseInt(localStorage.getItem(this.#localStorageKey)));
if (this.size != this.size) { this.#saveSize();
this.size = this.initSize;
this.#saveSize();
}
this.#updateTargetProperty(); this.#updateTargetProperty();
this.visual = this.appendChild(document.createElement("div")); this.visual = this.appendChild(document.createElement("div"));
@ -25,6 +23,13 @@ export class ResizeHandle extends HTMLElement {
this.#draggingBehaviour(); this.#draggingBehaviour();
} }
#setSize(newSize) {
if (newSize != newSize) {
this.size = this.initSize;
}
this.size = Math.max(this.minSize, newSize);
}
get #localStorageKey() { get #localStorageKey() {
return `rkgk.resizeHandle.size.${this.targetId}`; return `rkgk.resizeHandle.size.${this.targetId}`;
} }
@ -48,7 +53,7 @@ export class ResizeHandle extends HTMLElement {
let event = await listen([window, "mousemove"], [window, "mouseup"]); let event = await listen([window, "mousemove"], [window, "mouseup"]);
if (event.type == "mousemove") { if (event.type == "mousemove") {
if (this.direction == "vertical") { if (this.direction == "vertical") {
this.size = startingSize + (mouseDown.clientX - event.clientX); this.#setSize(startingSize + (mouseDown.clientX - event.clientX));
} }
this.#updateTargetProperty(); this.#updateTargetProperty();
} else if (event.type == "mouseup") { } else if (event.type == "mouseup") {