riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 57 Pull requests Projects 1 Activity

brush picker!

Browse source
This commit is contained in:
りき萌 2025-06-19 13:48:07 +02:00
parent 9b82b211b4
commit c1612b2a94
12 changed files with 849 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

31
static/resize-handle.js
View file

@ -1,9 +1,7 @@
import { listen } from "rkgk/framework.js";
import { listen, SaveData } from "rkgk/framework.js";
export class ResizeHandle extends HTMLElement {
constructor() {
super();
}
saveData = new SaveData("resizeHandle");
connectedCallback() {
this.direction = this.getAttribute("data-direction");
@ -13,7 +11,13 @@ export class ResizeHandle extends HTMLElement {
this.initSize = parseInt(this.getAttribute("data-init-size"));
this.minSize = parseInt(this.getAttribute("data-min-size"));
this.#setSize(parseInt(localStorage.getItem(this.#localStorageKey)));
this.saveData.elementId = this.targetId;
// NOTE(localStorage): Migration from old local storage key.
let oldSizeKey = `rkgk.resizeHandle.size.${this.targetId}`;
this.#setSize(
this.saveData.get("size") ?? localStorage.getItem(oldSizeKey) ?? this.initSize,
);
this.#saveSize();
this.#updateTargetProperty();
@ -21,6 +25,9 @@ export class ResizeHandle extends HTMLElement {
this.visual.classList.add("visual");
this.#draggingBehaviour();
// NOTE(localStorage): Migration from old local storage key.
localStorage.removeItem(oldSizeKey);
}
#setSize(newSize) {
@ -30,12 +37,8 @@ export class ResizeHandle extends HTMLElement {
this.size = Math.max(this.minSize, newSize);
}
get #localStorageKey() {
return `rkgk.resizeHandle.size.${this.targetId}`;
}
#saveSize() {
localStorage.setItem(this.#localStorageKey, this.size);
this.saveData.set("size", this.size);
}
#updateTargetProperty() {
@ -53,9 +56,11 @@ export class ResizeHandle extends HTMLElement {
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));
}
let delta =
this.direction == "vertical"
? mouseDown.clientX - event.clientX
: event.clientY - mouseDown.clientY;
this.#setSize(startingSize + delta);
this.#updateTargetProperty();
} else if (event.type == "mouseup") {
this.classList.remove("dragging");