Merge pull request #431 from jackgriffiths/resizing-ux

Improve resizing UX after dragging past the min and max widths
newcat · Oct 22, 2024 · c51ac18 · c51ac18
2 parents d78bb58 + 1119aeb
commit c51ac18
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/renderer-vue/src/node/Node.vue b/packages/renderer-vue/src/node/Node.vue
@@ -94,6 +94,8 @@ const renaming = ref(false);
 const tempName = ref("");
 const renameInputEl = ref<HTMLInputElement | null>(null);
 const isResizing = ref(false);
+let resizeStartWidth = 0;
+let resizeStartMouseX = 0;
 
 const showContextMenu = ref(false);
 const contextMenuItems = computed(() => {
@@ -174,12 +176,15 @@ const onRender = () => {
 
 const startResize = (ev: MouseEvent) => {
     isResizing.value = true;
+    resizeStartWidth = props.node.width;
+    resizeStartMouseX = ev.clientX;
     ev.preventDefault();
 };
 
 const doResize = (ev: MouseEvent) => {
     if (!isResizing.value) return;
-    const newWidth = props.node.width + ev.movementX / graph.value.scaling;
+    const deltaX = ev.clientX - resizeStartMouseX;
+    const newWidth = resizeStartWidth + deltaX / graph.value.scaling;
     const minWidth = viewModel.value.settings.nodes.minWidth;
     const maxWidth = viewModel.value.settings.nodes.maxWidth;
     props.node.width = Math.max(minWidth, Math.min(maxWidth, newWidth));

diff --git a/packages/renderer-vue/src/sidebar/Sidebar.vue b/packages/renderer-vue/src/sidebar/Sidebar.vue
@@ -28,6 +28,8 @@ export default defineComponent({
 
         const width = toRef(viewModel.value.settings.sidebar, "width");
         const resizable = computed(() => viewModel.value.settings.sidebar.resizable);
+        let resizeStartWidth = 0;
+        let resizeStartMouseX = 0;
 
         const node = computed(() => {
             const id = graph.value.sidebar.nodeId;
@@ -50,7 +52,9 @@ export default defineComponent({
             graph.value.sidebar.visible = false;
         };
 
-        const startResize = () => {
+        const startResize = (event: MouseEvent) => {
+            resizeStartWidth = width.value;
+            resizeStartMouseX = event.clientX;
             window.addEventListener("mousemove", onMouseMove);
             window.addEventListener(
                 "mouseup",
@@ -63,7 +67,8 @@ export default defineComponent({
 
         const onMouseMove = (event: MouseEvent) => {
             const maxwidth = el.value?.parentElement?.getBoundingClientRect().width ?? 500;
-            let newWidth = width.value - event.movementX;
+            const deltaX = event.clientX - resizeStartMouseX;
+            let newWidth = resizeStartWidth - deltaX;
             if (newWidth < 300) {
                 newWidth = 300;
             } else if (newWidth > 0.9 * maxwidth) {