CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-13 18:26:06 +12:00
Code Issues Projects Releases Wiki Activity

refactor

Browse source
This commit is contained in:
Gerard Burns 2023-11-23 13:37:10 +00:00
parent 63b4a4cada
commit 8b8604267d
2 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
View file

@ -119,6 +119,7 @@
</div>
<div
role="separator"
disabled={searching}
class="divider"
class:disabled={searching}

31
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/resizable.js
View file

@ -1,12 +1,11 @@
export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
const getResizeActions = (cssProperty, mouseMoveEventProperty, elementProperty, initialValue, setValue = () => {}) => {
let element = null;
const elementAction = (node) => {
element = node;
if (initialValue != null) {
element.style.height = `${initialValue}px`
element.style[cssProperty] = `${initialValue}px`
}
return {
@ -17,19 +16,19 @@ export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
}
const dragHandleAction = (node) => {
let startHeight = null;
let startProperty = null;
let startPosition = null;
const handleMouseMove = (e) => {
const change = e.pageY - startPosition;
element.style.height = `${startHeight + change}px`
const change = e[mouseMoveEventProperty] - startPosition;
element.style[cssProperty] = `${startProperty + change}px`
}
const handleMouseUp = () => {
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
element.style.removeProperty('transition'); // remove temporary transition override
setValue(element.clientHeight);
setValue(element[elementProperty]);
}
const handleMouseDown = (e) => {
@ -47,16 +46,16 @@ export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
return;
}
element.style.transition = "height 0ms"; // temporarily override any height transitions
startHeight = element.clientHeight;
startPosition = e.pageY;
element.style.transition = `${cssProperty} 0ms`; // temporarily override any height transitions
startProperty = element[elementProperty];
startPosition = e[mouseMoveEventProperty];
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
};
const handleDoubleClick = (e) => {
element.style.removeProperty("height");
const handleDoubleClick = () => {
element.style.removeProperty(cssProperty);
}
node.addEventListener("mousedown", handleMouseDown);
@ -75,3 +74,11 @@ export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
dragHandleAction
]
};
export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
return getResizeActions("height", "pageY", 'clientHeight', initialValue, setValue);
};
export const getHorizontalResizeActions = (initialValue, setValue = () => {}) => {
return getResizeActions("width", "pageX", 'clientWidth', initialValue, setValue);
};