From 74fc189dfd05c558c459eda917de55bbe131e21f Mon Sep 17 00:00:00 2001 From: Marvin Date: Sun, 22 Jan 2023 18:32:47 +0100 Subject: [PATCH 1/5] feat: add resize direction limit --- src/MoveResize/index.svelte | 45 ++++++++++++++++++++++++++++--------- 1 file changed, 35 insertions(+), 10 deletions(-) diff --git a/src/MoveResize/index.svelte b/src/MoveResize/index.svelte index 68539d4..c689860 100644 --- a/src/MoveResize/index.svelte +++ b/src/MoveResize/index.svelte @@ -7,26 +7,45 @@ -webkit-backface-visibility: hidden; } - .svlt-grid-resizer { - user-select: none; - width: 20px; - height: 20px; + .svlt-grid-resizer, + .svlt-grid-resizer-x, + .svlt-grid-resizer-y { position: absolute; + user-select: none; right: 0; bottom: 0; - cursor: se-resize; } - .svlt-grid-resizer::after { - content: ""; + .svlt-grid-resizer::after, + .svlt-grid-resizer-x::after, + .svlt-grid-resizer-y::after { position: absolute; right: 3px; bottom: 3px; width: 5px; height: 5px; + content: ''; border-right: 2px solid rgba(0, 0, 0, 0.4); border-bottom: 2px solid rgba(0, 0, 0, 0.4); } + .svlt-grid-resizer { + width: 20px; + height: 20px; + cursor: se-resize; + } + + .svlt-grid-resizer-x { + width: 10px; + height: 100%; + cursor: col-resize; + } + + .svlt-grid-resizer-y { + width: 100%; + height: 10px; + cursor: row-resize; + } + .svlt-grid-active { z-index: 3; cursor: grabbing; @@ -66,7 +85,9 @@ {active ? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;` : trans ? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;` : `transition: transform 0.2s, opacity 0.2s; transform: translate(${left}px, ${top}px); `} "> {#if resizable && !item.customResizer} -
+
{/if}
@@ -300,8 +321,12 @@ }; const resizePointerMove = ({ pageX, pageY }) => { - newSize.width = initSize.width + pageX - resizeInitPos.x; - newSize.height = initSize.height + pageY - resizeInitPos.y; + if (resizable === 'x' || resizable === true) { + newSize.width = initSize.width + pageX - resizeInitPos.x; + } + if (resizable === 'y' || resizable === true) { + newSize.height = initSize.height + pageY - resizeInitPos.y; + } // Get max col number let maxWidth = cols - shadow.x; From c30256dcd98529e947e0bcadbbe6b6adcaf740b7 Mon Sep 17 00:00:00 2001 From: Marvin Date: Mon, 23 Jan 2023 21:37:05 +0100 Subject: [PATCH 2/5] fix: rename classes to make legacy changes compatible --- src/MoveResize/index.svelte | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/MoveResize/index.svelte b/src/MoveResize/index.svelte index c689860..4c3b9a8 100644 --- a/src/MoveResize/index.svelte +++ b/src/MoveResize/index.svelte @@ -8,16 +8,16 @@ } .svlt-grid-resizer, - .svlt-grid-resizer-x, - .svlt-grid-resizer-y { + .svlt-grid-resizer.only-x, + .svlt-grid-resizer.only-y { position: absolute; user-select: none; right: 0; bottom: 0; } .svlt-grid-resizer::after, - .svlt-grid-resizer-x::after, - .svlt-grid-resizer-y::after { + .svlt-grid-resizer.only-x::after, + .svlt-grid-resizer.only-y::after { position: absolute; right: 3px; bottom: 3px; @@ -34,13 +34,13 @@ cursor: se-resize; } - .svlt-grid-resizer-x { + .svlt-grid-resizer.only-x { width: 10px; height: 100%; cursor: col-resize; } - .svlt-grid-resizer-y { + .svlt-grid-resizer.only-y { width: 100%; height: 10px; cursor: row-resize; @@ -81,12 +81,12 @@ on:pointerdown={item && item.customDragger ? null : draggable && pointerdown} class="svlt-grid-item" class:svlt-grid-active={active || (trans && rect)} - style="width: {active ? newSize.width : width}px; height:{active ? newSize.height : height}px; + style="width: {active ? newSize.width : width}px; height:{active ? newSize.height : height}px; {active ? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;` : trans ? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;` : `transition: transform 0.2s, opacity 0.2s; transform: translate(${left}px, ${top}px); `} "> {#if resizable && !item.customResizer} -
{/if}
From 16ae1915182255415e9ef3138b931abc17863a98 Mon Sep 17 00:00:00 2001 From: Marvin Date: Mon, 23 Jan 2023 21:45:20 +0100 Subject: [PATCH 3/5] feat: add draggable class to allow custom style --- src/MoveResize/index.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/MoveResize/index.svelte b/src/MoveResize/index.svelte index 4c3b9a8..87dea9c 100644 --- a/src/MoveResize/index.svelte +++ b/src/MoveResize/index.svelte @@ -46,7 +46,7 @@ cursor: row-resize; } - .svlt-grid-active { + .svlt-grid-item .svlt-grid-active { z-index: 3; cursor: grabbing; position: fixed; @@ -80,6 +80,7 @@ draggable={false} on:pointerdown={item && item.customDragger ? null : draggable && pointerdown} class="svlt-grid-item" + class:draggable={draggable} class:svlt-grid-active={active || (trans && rect)} style="width: {active ? newSize.width : width}px; height:{active ? newSize.height : height}px; {active ? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;` : trans ? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;` : `transition: transform 0.2s, opacity 0.2s; transform: translate(${left}px, ${top}px); `} "> From 14481e8cfee33faa21b4e111e09cfa9170737c70 Mon Sep 17 00:00:00 2001 From: Marvin Date: Mon, 23 Jan 2023 21:45:20 +0100 Subject: [PATCH 4/5] Revert "feat: add draggable class to allow custom style" This reverts commit 16ae1915182255415e9ef3138b931abc17863a98. --- src/MoveResize/index.svelte | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/MoveResize/index.svelte b/src/MoveResize/index.svelte index 87dea9c..4c3b9a8 100644 --- a/src/MoveResize/index.svelte +++ b/src/MoveResize/index.svelte @@ -46,7 +46,7 @@ cursor: row-resize; } - .svlt-grid-item .svlt-grid-active { + .svlt-grid-active { z-index: 3; cursor: grabbing; position: fixed; @@ -80,7 +80,6 @@ draggable={false} on:pointerdown={item && item.customDragger ? null : draggable && pointerdown} class="svlt-grid-item" - class:draggable={draggable} class:svlt-grid-active={active || (trans && rect)} style="width: {active ? newSize.width : width}px; height:{active ? newSize.height : height}px; {active ? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;` : trans ? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;` : `transition: transform 0.2s, opacity 0.2s; transform: translate(${left}px, ${top}px); `} "> From 9cebf440ef632c72a9144d62beabf001699d936a Mon Sep 17 00:00:00 2001 From: Marvin Date: Mon, 23 Jan 2023 21:50:05 +0100 Subject: [PATCH 5/5] feat: add draggable class to allow custom style --- src/MoveResize/index.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/MoveResize/index.svelte b/src/MoveResize/index.svelte index 4c3b9a8..823ab79 100644 --- a/src/MoveResize/index.svelte +++ b/src/MoveResize/index.svelte @@ -48,7 +48,7 @@ .svlt-grid-active { z-index: 3; - cursor: grabbing; + cursor: grabbing!important; position: fixed; opacity: 0.5; @@ -80,6 +80,7 @@ draggable={false} on:pointerdown={item && item.customDragger ? null : draggable && pointerdown} class="svlt-grid-item" + class:draggable={draggable} class:svlt-grid-active={active || (trans && rect)} style="width: {active ? newSize.width : width}px; height:{active ? newSize.height : height}px; {active ? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;` : trans ? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;` : `transition: transform 0.2s, opacity 0.2s; transform: translate(${left}px, ${top}px); `} ">