rainbownapkin/canopy
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Added snapping size-limits to channel click draggers

Browse source
This commit is contained in:
rainbow napkin 2026-10-07 05:47:32 -04:00
parent f5951e068c
commit ccc26e1ae2
3 changed files with 34 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

28
www/js/utils.js
View file

@ -561,7 +561,7 @@ class canopyUXUtils{
}
static clickDragger = class{
constructor(handle, element, leftHandle = true, parent, flex = true){
constructor(handle, element, leftHandle = true, parent, flex = true, sizeLimit = 100, limitTolerance = 0.1){
//Pull needed nodes
this.handle = document.querySelector(handle);
this.element = document.querySelector(element);
@ -584,6 +584,12 @@ class canopyUXUtils{
//Create boolean to allow parent classes to suspend click dragging behavior
this.enabled = true;
//Create number to hold size limit of click dragger
this.sizeLimit = sizeLimit;
//Create number to hold size limit tolerance
this.limitTolerance = limitTolerance;
//Setup our event listeners
this.setupInput();
}
@ -602,8 +608,14 @@ class canopyUXUtils{
window.document.body.style.userSelect = "none";
window.document.body.style.cursor = "ew-resize";
//Dispatch click drag start event through handle
this.handle.dispatchEvent(new CustomEvent("clickdragstart"));
//Create a new event
let endEvent = new CustomEvent("clickdragstart");
//Set the element to the drag body
endEvent.element = this.element;
//Dispatch click drag end event through handle
this.handle.dispatchEvent(endEvent);
}
endDrag(event){
@ -616,8 +628,14 @@ class canopyUXUtils{
window.document.body.style.userSelect = "auto";
window.document.body.style.cursor = "auto";
//Create a new event
let endEvent = new CustomEvent("clickdragend");
//Set the element to the drag body
endEvent.element = this.element;
//Dispatch click drag end event through handle
this.handle.dispatchEvent(new CustomEvent("clickdragend"));
this.handle.dispatchEvent(endEvent);
}
drag(event){
@ -669,7 +687,7 @@ class canopyUXUtils{
//Little hacky but this ensures that if our click dragger tries to do something that it should absolutely never be doing
//it'll be told to sit down, shut up, and fuck off.
return width < 100 ? width : 20;
return width < (this.sizeLimit - this.limitTolerance) ? width : this.sizeLimit;
}