Finalized the draggable implementation

Author: karleinarb

src/ui/Dialog/Dialog.stories.js

@@ -161,3 +161,54 @@ export function PreventScrollingBehind () {
     </>
   )
 }
+
+export function Draggable () {
+  const [dialogOpen, setIsDialogOpen] = useState(false)
+  const [dialog2Open, setDialog2Open] = useState(false)
+
+  return (
+    <>
+      <div>
+        <Button onClick={() => { setIsDialogOpen(!dialogOpen) }}>{`${!dialogOpen ? 'Åpne' : 'Lukk'} modal`}</Button>
+      </div>
+      <p />
+
+      <Dialog
+        isOpen={dialogOpen}
+        onDismiss={() => { setIsDialogOpen(false) }}
+        showCloseButton
+        draggable
+        contained
+        width='60%'
+        height='50%'
+      >
+        <DialogTitle>This is the first dialog</DialogTitle>
+        <DialogBody>
+          Click and drag the top part of the dialog to move it.<br />
+          This dialog is <b>contained</b> and is not allowed to move outside it's parents bounds
+        </DialogBody>
+        <DialogActions>
+          <Button size='small' onClick={() => setDialog2Open(true)}>Open nested dialog</Button>
+          <Button size='small' type='secondary' onClick={() => { setIsDialogOpen(false) }}>Close</Button>
+        </DialogActions>
+      </Dialog>
+      <Dialog
+        isOpen={dialog2Open}
+        onDismiss={() => setDialog2Open(false)}
+        width='50%'
+        draggable
+        height='30%'
+      >
+        <DialogTitle>
+          Draggable nested dialog
+        </DialogTitle>
+        <DialogBody>
+          This dialog is also draggable, but it is not <b>contained</b>
+        </DialogBody>
+        <DialogActions>
+          <Button size='small' onClick={() => setDialog2Open(false)}>Close</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

src/ui/Dialog/index.js

@@ -8,11 +8,12 @@ import './styles.scss'
 import ScrollLock from 'react-scrolllock'
 import { Draggable } from '../Draggable'
 
-export function Dialog ({ isOpen, title, className, persistent, width, height, draggable, showCloseButton, onDismiss, onCloseBtnClick, onClickOutside, onPressEscape, style, ...props }) {
+export function Dialog ({ isOpen, title, className, persistent, width, height, draggable, contained, showCloseButton, onDismiss, onCloseBtnClick, onClickOutside, onPressEscape, style, ...props }) {
   // Set an unique ID for the dialog
   const [id] = useState(`${nanoid()}`)
 
   const [clickStartedInsideDialog, setClickStartedInsideDialog] = useState(undefined)
+  const [isDragging, setIsDragging] = useState(false)
 
   // onCreated lifecycle-hook
   useEffect(() => {
@@ -36,6 +37,7 @@ export function Dialog ({ isOpen, title, className, persistent, width, height, d
 
     function handleMouseUp (e) {
       setClickStartedInsideDialog(false)
+      setIsDragging(false)
     }
 
     // Register eventhandlers
@@ -53,13 +55,20 @@ export function Dialog ({ isOpen, title, className, persistent, width, height, d
       _s.width = width || '100%'
       _s.height = height || '100%'
     } else {
-      _s.width = '100%';
-      _s.height = '100%';
+      _s.width = '100%'
+      _s.height = '100%'
     }
 
     return _s
   }, [draggable, width, height])
 
+  const dialogClasses = useMemo(() => {
+    let classes = 'dialog'
+    if (isDragging) classes += ' dialog-no-select'
+
+    return classes
+  }, [isDragging])
+
   // Plays the shaking animation-effect when the dialog is persistent
   function shakeDialogBox () {
     const dialog = document.getElementById(`dialog-${id}`)
@@ -93,17 +102,17 @@ export function Dialog ({ isOpen, title, className, persistent, width, height, d
     isOpen === true &&
       <ScrollLock isActive={isOpen}>
         <div id={`dialog-backdrop-${id}`} className={`dialog-backdrop ${className}`} onMouseUp={(e) => handleBackdropClick(e)}>
-          <Draggable active={draggable} width={width} height={height}>
+          <Draggable active={draggable && isDragging} contained={contained} width={width} height={height}>
             <div
               id={`dialog-${id}`}
-              className='dialog'
+              className={dialogClasses}
               aria-label='dialog'
               aria-modal='true'
               role='dialog'
-              style={style}
-              onMouseDown={(e) => { setClickStartedInsideDialog(true) }}
+              style={dialogStyle}
+              onMouseDown={() => { setClickStartedInsideDialog(true) }}
             >
-              <div className='dialog-drag-area'/>
+              <div className='dialog-drag-area' onMouseDown={() => setIsDragging(true)} />
               {!persistent && showCloseButton &&
                 <button className='dialog-close-btn' onClick={(e) => { handleCloseBtnClick(); e.preventDefault() }} aria-label='Lukk'>
                   <CloseIcon alt='' />
@@ -144,6 +153,7 @@ export function DialogActions ({ children, style }) {
 Dialog.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
+  contained: PropTypes.bool,
   draggable: PropTypes.bool,
   height: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,

src/ui/Dialog/styles.scss

@@ -45,11 +45,15 @@
   position: absolute;
   top: 0;
   left: 0;
-  right: 20%;
+  right: 0;
   height: $baseUnit * 4;
   cursor: move;
 }
 
+.dialog-no-select {
+  user-select: none!important;
+}
+
 .dialog-title {
   font-weight: 500;
   font-size: x-large;

src/ui/Draggable/index.js

@@ -1,85 +1,93 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
 import './styles.scss'
 
-export function Draggable ({ children, active, width, height }) {
+export function Draggable ({ children, active, contained, width, height }) {
   const [isDragging, setIsDragging] = useState(false)
   const [coordinates, setCoordinates] = useState(undefined)
+  const [mouseSelfDelta, setMouseSelfDelta] = useState(undefined)
   const thisRef = useRef(undefined)
 
   const parsedStyle = useMemo(() => {
-    let _s = { width, height };
-    if(coordinates?.x && coordinates?.y) {
+    const _s = { width, height }
+    if (coordinates?.x && coordinates?.y) {
       _s.top = `${coordinates.y}px`
       _s.left = `${coordinates.x}px`
     }
-    console.log('Style', _s);
-    return _s;
+    return _s
   }, [width, height, coordinates])
 
   useEffect(() => {
+    /**
+     *
+     * @param {MouseEvent} e
+     * @returns
+     */
     function handleMouseMove (e) {
-      if(!isDragging) return;
-      console.log('Moving', e)
-      console.log(`Client - ${e.clientX}:${e.clientY}`)
-      console.log(`Layer - ${e.layerX}:${e.layerY}`)
-      console.log(`Offset - ${e.offsetX}:${e.offsetY}`)
-      console.log(`Page - ${e.pageX}:${e.pageY}`)
-      console.log(`Screen - ${e.screenX}:${e.screenY}`)
-      console.log('Ref', thisRef?.current)
-
-
-      if(thisRef?.current) {
-        console.dir(thisRef.current)
-        console.log(`Client - ${e.clientX}:${e.clientY}`)
-        console.log(`Dialog - ${thisRef.current.offsetLeft} : ${thisRef.current.offsetTop} `)
-
-        let deltaX = e.clientX - (thisRef.current.offsetLeft / 2);
-        let deltaY = e.clientY - (thisRef.current.offsetTop / 2);
-
-        // deltaX = Math.max(deltaX, 0);
-        // deltaY = Math.min(1080, deltaY);
+      if (!active || !isDragging) return
+
+      if (thisRef?.current) {
+        let x = e.clientX - mouseSelfDelta.x
+        let y = e.clientY - mouseSelfDelta.y
+
+        const width = thisRef.current.clientWidth
+        const height = thisRef.current.clientHeight
+        const bboxRight = x + thisRef.current.clientWidth
+        const bboxBottom = y + height
+        const parentWidth = thisRef.current.parentNode.clientWidth
+        const parentHeight = thisRef.current.parentNode.clientHeight
+
+        if (contained) {
+          if (x <= 1) x = 1
+          else if (bboxRight >= parentWidth) x = parentWidth - width
+          if (y <= 1) y = 1
+          else if (bboxBottom >= parentHeight) y = parentHeight - height
+        } else {
+          if (x === 0) x = -1
+          if (y === 0) y = -1
+        }
 
         setCoordinates({
-          x: deltaX,
-          y: deltaY
+          x,
+          y
         })
       }
     }
-    console.log('Registering event listerner');
+
     document.addEventListener('mousemove', handleMouseMove)
 
     return () => {
-      console.log('Unregistering')
       document.removeEventListener('mousemove', handleMouseMove)
     }
-  }, [isDragging])
+  }, [active, isDragging])
 
   useEffect(() => {
-    function handleMouseUp() {
-      setIsDragging(false);
+    function handleMouseUp () {
+      setIsDragging(false)
     }
 
     document.addEventListener('mouseup', handleMouseUp)
 
     return () => {
-      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mouseup', handleMouseUp)
     }
   })
 
-  useEffect(() => {
+  function handleDragStart (e) {
     if (thisRef) {
-      setCoordinates(thisRef)
+      setIsDragging(true)
+      setMouseSelfDelta({
+        x: e.clientX - thisRef.current.offsetLeft,
+        y: e.clientY - thisRef.current.offsetTop
+      })
+      setCoordinates({
+        x: thisRef.current.offsetLeft,
+        y: thisRef.current.offsetTop
+      })
     }
-    console.log(coordinates)
-  }, [thisRef])
-
-  function handleDragStart (e) {
-    console.log('Drag started', e)
-    setIsDragging(true)
   }
 
   function handleDragEnd (e) {
-    console.log('Drag stopped')
     setIsDragging(false)
   }
 
@@ -89,3 +97,11 @@ export function Draggable ({ children, active, width, height }) {
     </div>
   )
 }
+
+Draggable.propTypes = {
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  contained: PropTypes.bool,
+  height: PropTypes.string,
+  width: PropTypes.string
+}