dragbar component

apps/remix-ide/src/app.tsx

@@ -8,7 +8,9 @@ appComponent.run()
 
 function App () {
   return <>
-    <RemixApp app={appComponent}></RemixApp>
+    <React.StrictMode>
+      <RemixApp app={appComponent}></RemixApp>
+    </React.StrictMode>
   </>
 }
 

apps/remix-ide/src/walkthroughService.js

@@ -15,14 +15,12 @@ export class WalkthroughService extends Plugin {
     super(profile)
     appManager.event.on('activate', (plugin) => {
       if (plugin.name === 'udapp' && !showMatamo) {
-        console.log('start')
         this.start()
       }
     })
   }
 
   start () {
-    console.log('start')
     if (!localStorage.getItem('hadTour_initial')) {
       introJs().setOptions({
         steps: [{
@@ -63,8 +61,6 @@ export class WalkthroughService extends Plugin {
         }
       }).start()
       localStorage.setItem('hadTour_initial', true)
-    } else {
-      console.log('had walkthrough')
     }
   }
 }

libs/remix-ui/app/src/lib/remix-app/dragbar/dragbar.css

@@ -0,0 +1,26 @@
+/* dragbar UI */
+
+.dragbar           {
+    display            : block;
+    height             : 100%;
+    position           : absolute;
+    left: 0px;
+    top: 0px;
+    width: 0.3em;
+    z-index: 9999;
+  }
+  
+  .overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    display: block;
+    z-index: 9998;
+  }
+  
+  .dragbar:hover, .dragbar.ondrag{
+    background-color: var(--secondary);
+    cursor:col-resize;
+  }

libs/remix-ui/app/src/lib/remix-app/dragbar/dragbar.tsx

@@ -1,36 +1,53 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Draggable from 'react-draggable'
+import './dragbar.css'
 
 interface IRemixDragBarUi {
   refObject: React.MutableRefObject<any>;
   setHideStatus: (hide: boolean) => void;
+  hidden: boolean
+  minWidth: number
 }
 
 const DragBar = (props: IRemixDragBarUi) => {
   const [dragState, setDragState] = useState<boolean>(false)
-  const [dragBarPos, setDragBarPos] = useState<number>(0)
+  const [dragBarPosX, setDragBarPosX] = useState<number>(0)
+  const [offset, setOffSet] = useState<number>(0)
+  const nodeRef = React.useRef(null) // fix for strictmode
+
+  useEffect(() => {
+    // arbitrary time out to wait the the UI to be completely done
+    setTimeout(() => {
+      setOffSet(props.refObject.current.offsetLeft)
+      setDragBarPosX(offset + props.refObject.current.offsetWidth)
+    }, 1000)
+  }, [])
+
+  useEffect(() => {
+    setDragBarPosX(offset + (props.hidden ? 0 : props.refObject.current.offsetWidth))
+  }, [props.hidden, offset])
 
   function stopDrag (e: MouseEvent, data: any) {
-    console.log(data)
     setDragState(false)
-    props.refObject.current.style.width = (320 + data.x) + 'px'
+    if (data.x < props.minWidth) {
-    console.log(props.refObject.current.offsetWidth)
+      setDragBarPosX(offset)
-    if ((320 + data.x) < 250) {
       props.setHideStatus(true)
-      setDragBarPos(41 - 360)
     } else {
+      props.refObject.current.style.width = (data.x - offset) + 'px'
       props.setHideStatus(false)
-      setDragBarPos(props.refObject.current.offsetWidth - 320)
+      setDragBarPosX(offset + props.refObject.current.offsetWidth)
     }
   }
 
-  function startDrag (e: MouseEvent, data: any) {
+  function startDrag () {
-    console.log('start')
     setDragState(true)
   }
-  return <Draggable position={{ x: dragBarPos, y: 0 }} onStart={startDrag} onStop={stopDrag} axis="x">
+  return <>
-    <div className={`dragbar ${dragState ? 'ondrag' : ''}`}></div>
+    <div className={`overlay ${dragState ? '' : 'd-none'}`} ></div>
-  </Draggable>
+    <Draggable nodeRef={nodeRef} position={{ x: dragBarPosX, y: 0 }} onStart={startDrag} onStop={stopDrag} axis="x">
+      <div ref={nodeRef} className={`dragbar ${dragState ? 'ondrag' : ''}`}></div>
+    </Draggable>
+  </>
 }
 
 export default DragBar

libs/remix-ui/app/src/lib/remix-app/modals/matomo.tsx

@@ -20,7 +20,6 @@ const MatomoDialog = (props) => {
     setVisible(false)
   }
   const hideModal = async () => {
-    console.log('handle hide')
     setVisible(false)
   }
   const handleModalOkClick = async () => {

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -5,7 +5,6 @@ import RemixSplashScreen from './modals/splashscreen'
 import MatomoDialog from './modals/matomo'
 import AlertModal from './modals/alert'
 import AppContext from './context/context'
-import Draggable from 'react-draggable'
 import DragBar from './dragbar/dragbar'
 interface IRemixAppUi {
   app: any
@@ -13,17 +12,13 @@ interface IRemixAppUi {
 
 const RemixApp = (props: IRemixAppUi) => {
   const [appReady, setAppReady] = useState<boolean>(false)
-  const [dragState, setDragState] = useState<boolean>(false)
   const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
-  const [dragBarPos, setDragBarPos] = useState<number>(0)
   const sidePanelRef = useRef(null)
   const mainPanelRef = useRef(null)
   const iconPanelRef = useRef(null)
   const hiddenPanelRef = useRef(null)
-  const resizePanelRef = useRef(null)
 
   useEffect(() => {
-    console.log('mounting app')
     if (sidePanelRef.current) {
       if (props.app.sidePanel) {
         sidePanelRef.current.appendChild(props.app.sidePanel.render())
@@ -52,20 +47,17 @@ const RemixApp = (props: IRemixAppUi) => {
       })
     }
     if (props.app) {
-      console.log('app', props.app)
       activateApp()
     }
   }, [])
 
   function setListeners () {
     props.app.sidePanel.events.on('toggle', () => {
-      console.log('toggle')
       setHideSidePanel(prev => {
         return !prev
       })
     })
     props.app.sidePanel.events.on('showing', () => {
-      console.log('showing')
       setHideSidePanel(false)
     })
   }
@@ -73,7 +65,6 @@ const RemixApp = (props: IRemixAppUi) => {
   const components = {
     iconPanel: <div ref={iconPanelRef} id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light"></div>,
     sidePanel: <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}></div>,
-    resizePanel: <div ref={resizePanelRef} id="resize-panel" data-id="remixIdeResizePanel"></div>,
     mainPanel: <div ref={mainPanelRef} id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'></div>,
     hiddenPanel: <div ref={hiddenPanelRef}></div>
   }
@@ -87,12 +78,11 @@ const RemixApp = (props: IRemixAppUi) => {
       <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
         {components.iconPanel}
         {components.sidePanel}
-        <DragBar refObject={sidePanelRef} setHideStatus={setHideSidePanel}></DragBar>
+        <DragBar minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
         {components.mainPanel}
 
       </div>
       {components.hiddenPanel}
-      <div className={`overlay ${dragState ? '' : 'd-none'}`} ></div>
     </AppContext.Provider>
 
   )

libs/remix-ui/app/src/lib/remix-app/style/remix-app.css

@@ -68,29 +68,4 @@ pre {
 
 .splash {
   text-align: center;
-}
-
-.dragbar           {
-  display            : block;
-  height             : 100%;
-  position           : absolute;
-  left: 367px;
-  top: 0px;
-  width: 0.3em;
-  z-index: 9999;
-}
-
-.overlay {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  display: block;
-  z-index: 9998;
-}
-
-.dragbar:hover, .dragbar.ondrag{
-  background-color: var(--secondary);
-  cursor:col-resize;
 }