add resize handle to brush editor

This commit is contained in:
liquidex 2024-09-02 22:37:50 +02:00
parent c1ccc1be24
commit b3911b7af1
3 changed files with 117 additions and 10 deletions

View file

@ -22,11 +22,13 @@ main {
}
&>.panels {
--right-width: 384px; /* Overridden by JavaScript */
box-sizing: border-box;
padding: 16px;
display: grid;
grid-template-columns: [left] 1fr [right] 384px;
grid-template-columns: [left] 1fr [right-resize] auto [right] var(--right-width);
/* Pass all events through. Children may receive events as normal. */
pointer-events: none;
@ -35,11 +37,24 @@ main {
pointer-events: all;
}
&>rkgk-brush-editor {
&>.right {
grid-column: right / right;
height: fit-content;
max-height: 100%;
overflow: auto;
display: flex;
flex-direction: row;
justify-content: stretch;
&>rkgk-resize-handle {
flex-shrink: 0;
height: auto;
}
&>rkgk-brush-editor {
max-height: 100%;
overflow: auto;
flex-grow: 1;
}
}
}
@ -60,10 +75,6 @@ main {
overflow: hidden;
}
&>rkgk-brush-editor {
width: 384px;
}
&>#js-loading {
background-color: var(--color-panel-background);
@ -73,6 +84,29 @@ main {
}
}
/* Resize handle */
rkgk-resize-handle {
&[data-direction="vertical"] {
display: block;
width: 16px;
height: 100%;
cursor: col-resize;
&>.visual {
width: 2px;
height: 100%;
background-color: var(--color-brand-blue);
margin: 0 auto;
opacity: 0%;
}
&:hover>.visual, &.dragging>.visual {
opacity: 100%;
}
}
}
/* Canvas renderer */

View file

@ -17,6 +17,7 @@
<script src="static/canvas-renderer.js" type="module"></script>
<script src="static/connection-status.js" type="module"></script>
<script src="static/framework.js" type="module"></script>
<script src="static/resize-handle.js" type="module"></script>
<script src="static/reticle-renderer.js" type="module"></script>
<script src="static/session.js" type="module"></script>
<script src="static/throbber.js" type="module"></script>
@ -43,13 +44,20 @@
<main>
<rkgk-canvas-renderer class="fullscreen"></rkgk-canvas-renderer>
<rkgk-reticle-renderer class="fullscreen"></rkgk-reticle-renderer>
<div class="panels fullscreen">
<div class="panels fullscreen" id="panels-overlay">
<div class="rkgk-panel menu-bar">
<a class="icon icon-rkgk-grayscale" title="I know this menu bar is really ugly. Sorry about that."></a>
<hr>
<a href="/docs/rkgk.html">Manual</a>
</div>
<rkgk-brush-editor></rkgk-brush-editor>
<div class="right">
<rkgk-resize-handle
data-direction="vertical"
data-target="panels-overlay"
data-target-property="--right-width"
data-init-size="384"></rkgk-resize-handle>
<rkgk-brush-editor></rkgk-brush-editor>
</div>
</div>
<rkgk-welcome>

65
static/resize-handle.js Normal file
View file

@ -0,0 +1,65 @@
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.size = parseInt(localStorage.getItem(this.#localStorageKey));
if (this.size != this.size) {
this.size = this.initSize;
this.#saveSize();
}
this.#updateTargetProperty();
this.visual = this.appendChild(document.createElement("div"));
this.visual.classList.add("visual");
this.#draggingBehaviour();
}
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.size = 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);