CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-09 07:08:01 +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>
<div <div
role="separator"
disabled={searching} disabled={searching}
class="divider" class="divider"
class:disabled={searching} class:disabled={searching}

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

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