feat: Drag: locking & unlocking (#273)

closes #272 closes #276 Add the ability to lock the dragging mechanism so that no dragging will be possible. Why? Sometimes when you're editing a draggable item you don't want to enable mouse dragging actioning - when editing text for example.
fold-dev · Jul 16, 2024 · 388e992 · 388e992
1 parent 3e5f797
commit 388e992
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 17 deletions.
diff --git a/packages/core/src/badge/badge.css b/packages/core/src/badge/badge.css
@@ -1,7 +1,7 @@
 :root {
     --f-badge-border-radius: var(--f-radius-full);
     --f-badge-background-color: var(--f-color-surface-stronger);
-    --f-badge-color: var(--f-color-text-weaker);
+    --f-badge-color: var(--f-color-text-weak);
     --f-badge-dot-size: var(--f-size-3);
     --f-badge-border-color: var(--f-color-border-strong);
     --f-badge-border-size: 1px;

diff --git a/packages/core/src/contexts/fold.context.tsx b/packages/core/src/contexts/fold.context.tsx
@@ -46,6 +46,7 @@ import {
     FIPen,
     FIPlay,
     FIPlus,
+    FIRepeat,
     FIRotateLeft,
     FIRotateRight,
     FISearch,
@@ -63,6 +64,7 @@ import {
 import { ToastContainer } from '../toast/toast'
 
 export const defaultIcons = {
+    'repeat': FIRepeat,
     'lock-closed': FILockClosed,
     'lock-open': FILockOpen,
     'cog': FICog,

diff --git a/packages/core/src/drag/drag-manager.tsx b/packages/core/src/drag/drag-manager.tsx
@@ -21,6 +21,7 @@ export const FOLD_DRAG_CACHE = 'FOLD_DRAG_CACHE'
 export const FOLD_DRAG_STATE = 'FOLD_DRAG_STATE'
 
 windowObject[FOLD_DRAG_CACHE] = {
+    locked: false,
     mouseDown: false,
     init: {},
     originMouse: {},
@@ -61,18 +62,9 @@ export const DragManager = (props: DragManagerProps) => {
             } else {
                 dispatchDragEvent('ondrop', { origin, target })
             }
-            endDrag()
-            setTarget({})
-            setOrigin({ targetVariant: {} })
-            cache.mouseDown = false
-        } else {
-            endDrag()
-            // TODO: keep an eye on this, if it causes glitches the endDrag process
-            // not too sure why this wasn't here already (if it was for a reason)
-            setTarget({})
-            setOrigin({ targetVariant: {} })
-            cache.mouseDown = false
         }
+
+        endDrag()
     }
 
     const handleMouseUp = (e) => {
@@ -85,7 +77,7 @@ export const DragManager = (props: DragManagerProps) => {
     }
 
     const handleMouseMove = (e) => {
-        if (isDragging) {
+        if (isDragging && !cache.locked) {
             const mouseY = e.clientY
             const mouseX = e.clientX
             const { offsetLeft, offsetTop } = cache.originMouse

diff --git a/packages/core/src/drag/drag.hook.ts b/packages/core/src/drag/drag.hook.ts
@@ -57,10 +57,14 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
     }
 
     const endDrag = () => {
+        const cache = getCache()
         delete documentObject.body.dataset.dragging
         clearGhostElement()
         globalCursor.remove('grabbing')
         dispatchDragEvent('onend', null)
+        setTarget({})
+        setOrigin({ targetVariant: {} })
+        cache.mouseDown = false
     }
 
     const updateTargetIndent = (indentLevel) => {
@@ -124,7 +128,7 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
         const noDrag = !!el.dataset.nodrag
         const noDrop = !!el.dataset.nodrop
 
-        if (!noDrag && isLeftButton) {
+        if (!noDrag && isLeftButton && !cache.locked) {
             e.stopPropagation()
 
             cache.mouseDown = true
@@ -234,6 +238,11 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
         }
     }
 
+    const lockDrag = (locked: boolean) => {
+        const cache = getCache()
+        cache.locked = locked
+    }
+
     useEffect(() => {
         ghostRef.current = documentObject.getElementById('f-drag-ghost')
     }, [])
@@ -255,5 +264,6 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
         indent,
         onMouseDown,
         onMouseUp,
+        lockDrag,
     }
 }
diff --git a/packages/core/src/form/form.css b/packages/core/src/form/form.css
@@ -6,7 +6,7 @@
     --f-form-control-spacing: var(--f-space-2);
     --f-form-fieldset-border-radius: var(--f-radius);
     --f-form-fieldset-legend-margin: var(--f-space-5);
-    --f-form-fieldset-legend-color: var(--f-color-text-weak);
+    --f-form-fieldset-legend-color: var(--f-color-text);
     --f-form-label-required-color: var(--f-color-danger);
     --f-form-description-color: var(--f-color-text-weaker);
 }

diff --git a/packages/core/src/hooks/check.hook.ts b/packages/core/src/hooks/check.hook.ts
@@ -5,6 +5,7 @@ export const useCheck = (isChecked: boolean = false) => {
 
     return {
         checked,
+        setChecked,
         check: () => {
             setChecked(!checked)
         },

diff --git a/packages/core/src/icon/icons.tsx b/packages/core/src/icon/icons.tsx
@@ -1,5 +1,20 @@
 import React from 'react'
 
+export const FIRepeat = (props: any) => (
+    <svg
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        {...props}>
+        <path 
+            strokeLinecap="round" 
+            strokeLinejoin="round" 
+            d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" 
+        />
+    </svg>
+)
+
 export const FILockOpen = (props: any) => (
     <svg
         fill="none"

diff --git a/packages/core/src/select/select.css b/packages/core/src/select/select.css
@@ -15,6 +15,7 @@
     --f-select-popover-border-radius: var(--f-radius);
     --f-select-popover-background: var(--f-color-surface);
     --f-select-popover-box-shadow: var(--f-shadow-lg);
+    --f-select-index: 1;
 }
 
 .f-select-container {
@@ -25,7 +26,7 @@
 }
 
 .f-select {
-    z-index: 1;
+    z-index: var(--f-select-index);
 }
 
 .f-select-container .f-input,
@@ -214,6 +215,10 @@ li.f-select-list-option-container {
 
 /* static */
 
+.f-select-container.is-static {
+    z-index: var(--f-select-index);
+}
+
 .f-select-container.is-static .f-input-control,
 .f-select-container.is-static input {
     border-bottom-left-radius: 0;

diff --git a/packages/core/src/text/text.css b/packages/core/src/text/text.css
@@ -1,6 +1,6 @@
 :root {
     --f-text-color: var(--f-color-text);
-    --f-label-color: var(--f-color-text-weak);
+    --f-label-color: var(--f-color-text);
     --f-blockquote-color: var(--f-color-text-weak);
     --f-link-color: var(--f-color-text-link);
     --f-text-decoration-size: default;