jrs-react 1.2.12 → 1.2.14

package/src/components/JRWindow/TitleBar.jsx

@@ -5,14 +5,18 @@ import { FreeType } from "../JRFrame/JRFrame";
 import { IconX,IconCard, IconSquare, IconMinus } from "../../assets/icon";
 import { background } from "storybook/internal/theming";
 import JRButton from "../JRInput/JRButton";
+import { browser } from "globals";
 
 const StyledTitle=styled.div`
     overflow: hidden;
     display: flex;
     border-radius: var(--jr-window-radius) var(--jr-window-radius) 0 0;
-    background:rgb(214, 214, 214);
-    color: black;
-    &:active:hover{
+    background:#464646;
+    color: white;
+    display: flex;
+    align-items: center;
+    min-height: min-content;
+    XX&:active{
         cursor: grabbing;
     }
     
@@ -36,6 +40,7 @@ const StyledTitle=styled.div`
 
 
         >button{
+            outline: unset;
             display:flex;
             align-items: center;
             justify-content: center;
@@ -52,14 +57,18 @@ const StyledTitle=styled.div`
                 color:white;
             }
             >svg{
+                color:#bababa;
                 width:14px;
                 height:14px;
                 cursor: pointer;
+                stroke-width: 3;
             }
         }
         >button.danger:hover{
             background: red;
-            color:white;
+            >svg{
+                color:white;
+            }
         } 
     }
 `
@@ -75,32 +84,78 @@ export default class TitleBar extends React.Component{
     x=0
     y=0
 
-    stop=(e)=>{
+    remember=(e)=>{
+        po('remember')
+        const {clientX,clientY}=e
+        const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
+        this.props.window.orgHeight=height
+        this.props.window.orgWidth=width
+        this.props.window.orgTop=y
+        this.props.window.orgLeft=x
+        this.props.window.orgXd=clientX-x
+        this.props.window.orgBodyOverflow=document.body.style.overflow
+    }
+    adjustScreen=(e)=>{
+        po('double click adjustScreen')
         e.preventDefault()
-        if(this.moved){
+        const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
+        if(y>1-this.props.thick){
+            this.remember(e)
+            this.fullScreen(e)
+        }else{
+            this.floatScreen(e)
+        }
+    }
+    floatScreen=(e)=>{
+        po('floatScreen')
+        const w=this.props.windowRef.current
+        const {clientX,clientY}=e
 
+        this.props.windowRef.current.style.transition='var(--transition-x-y), left .05s ease-in'
+        this.props.windowRef.current.style.left=`${this.props.window.orgLeft}px`
+        this.props.windowRef.current.style.top=`${this.props.window.orgTop}px`
+        this.props.windowRef.current.style.width=`${this.props.window.orgWidth}px`
+        this.props.windowRef.current.style.height=`${this.props.window.orgHeight}px`
+        document.body.style.overflow=this.props.window.orgBodyOverflow
+    }
+    fullScreen=(e)=>{
+        po('fullScreen',this.props.thick)
+
+        this.props.windowRef.current.style.transition='var(--transition-x-y), left .05s ease-in'
+        this.props.windowRef.current.style.left=`${-this.props.thick}px`
+        this.props.windowRef.current.style.top=`${-this.props.thick}px`
+        this.props.windowRef.current.style.width=`calc(100vw + ${this.props.thick*2}px)`//`${window.innerWidth+(this.props.thick*2)}px`
+        this.props.windowRef.current.style.height=`calc(100vh + ${this.props.thick*2}px)`//`${window.innerHeight+(this.props.thick*2)}px`
         
+        setTimeout(()=>{
+            document.body.style.overflow='hidden'
+            this.props.windowRef.current.style.transition='unset'
+        },50)
+
+    }
+    stop=(e)=>{
+        po('stop')
+        e.preventDefault()
+        if(this.moved){
+            const {clientX,clientY}=e
             const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
             const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
-            po('y',y)
-            if(y<1){
-                this.props.windowRef.current.style.transition='var(--transition-x-y), left .1s ease-in'
-                this.props.windowRef.current.style.left=`${-this.props.thick}px`
-                this.props.windowRef.current.style.width=`calc(100vw + ${this.props.thick*2}px)`//`${window.innerWidth+(this.props.thick*2)}px`
-                this.props.windowRef.current.style.height=`calc(100vh + ${this.props.thick*2}px)`//`${window.innerHeight+(this.props.thick*2)}px`
-
-                this.props.window.orgHeight=height
-                this.props.window.orgWidth=width
-            }
-            if(y>window.innerHeight)this.props.windowRef.current.style.top = `${window.innerHeight-titleBarHeight}px`
+
+            if(y<1-this.props.thick)this.fullScreen(e)
+            if(y>window.innerHeight-titleBarHeight)this.props.windowRef.current.style.top = `${window.innerHeight-titleBarHeight}px`
             if(x+width-this.props.thick<0)this.props.windowRef.current.style.left = 0
             if(x>window.innerWidth)this.props.windowRef.current.style.left = `${window.innerWidth-width}px`
-            document.body.style.cursor='default'
+            
         }
+        document.body.style.cursor='default'
         window.removeEventListener('mousemove',this.move)
         window.removeEventListener('mouseup',this.stop)
+        window.removeEventListener('mousemove',this.preMove)
+
+
     }
     move=(e)=>{
+        po('move')
         e.preventDefault()
         this.moved=true
         const {clientX,clientY}=e
@@ -111,54 +166,101 @@ export default class TitleBar extends React.Component{
         this.pos4 = y
 
         const w= this.props.windowRef.current
-        this.x=w.offsetLeft - this.pos1
         this.y=w.offsetTop - this.pos2
+        this.x=w.offsetLeft - this.pos1
+
+        // if(this.props.window.orgWidth){
+        //     w.style.width=`${this.props.window.orgWidth}px`
+        //     this.props.window.orgWidth=null
+        // }
+
+        this.y=this.y<-this.props.thick?-this.props.thick:this.y
+        w.style.transition='unset'
+        w.style.top = `${this.y}px`
+        w.style.left = `${this.x}px`
+    }
+    preMove=(e)=>{
+        console.clear()
+        po('preMove')
+        
+        const w=this.props.windowRef.current
+        const {clientX,clientY,...oe}=e
+        po('e',e)
+
+        const {x,y,width,height}=w.getBoundingClientRect()
+        po('width',width)
+
+        if(y<=-this.props.thick){
+
 
-        if(this.props.window.orgHeight){
-            w.style.height=`${this.props.window.orgHeight}px`
-            this.props.window.orgHeight=null
         }
-        if(this.props.window.orgWidth){
-            if(clientX>this.props.window.orgWidth){
-                this.x=clientX-(this.props.window.orgWidth/2)
-            }
+w.style.transition='left .05s ease-in, height .05s ease-in'
+        if(y<=0){
+            // contt browserWidth=
+            const w1=window.innerWidth-(this.props.thick*2)
+            const x1=clientX
+            const w2=this.props.window.orgWidth-32
+            const x2=x1/w1 * w2
+            // po('xp'   , x2)
+            w.style.left=`${clientX-x2}px`
+
             w.style.width=`${this.props.window.orgWidth}px`
-            this.props.window.orgWidth=null
+            w.style.height=`${this.props.window.orgHeight}px`
+        }else{
+            this.remember(e)
         }
 
-        this.y=this.y<-this.props.thick?-this.props.thick:this.y
-        w.style.top = this.y + 'px'
-        w.style.left = this.x + 'px'
+        document.body.style.cursor='grabbing'
+        document.body.style.overflow=this.props.window.orgBodyOverflow
+
+        
+        setTimeout(()=>{
+            window.addEventListener('mousemove',this.move)
+        },50)
+        window.removeEventListener('mousemove',this.preMove)
     }
     start(e){
+        po('start')
         e.preventDefault()
         this.moved=false
         this.pos3 = e.clientX
         this.pos4 = e.clientY
+        
         this.props.windowRef.current.style.transition='var(--transition-x-y)'
-        document.body.style.cursor='grabbing'
-        window.addEventListener('mousemove',this.move)
+        window.addEventListener('mousemove',this.preMove)
         window.addEventListener('mouseup',this.stop)
     }
+    onDoubleClick(){
+        po('onDoubleClick')
+    }
     render(){
+
         return <StyledTitle
             ref={this.props.titleBarRef}
             draggable="false"
             onMouseDown={(e)=>{
                 this.start(e)
             }}
+            onDoubleClick={this.adjustScreen}
         >
             <FreeType tag='div' config={this.props.title??''} me={this.props.window} className={'title'}/>
             <nav>
-                <JRButton icon={<IconMinus />}/>
-                <JRButton icon={<IconSquare />}/>
+                {/* <JRButton icon={<IconMinus />}/>
+                <JRButton icon={<IconSquare />}/> */}
                 {
                     this.props.window.props.setOpen
                         ?<JRButton icon={<IconX />} 
                             className={'danger'}
-                            onClick={()=>{
+                            onClick={(e)=>{
+                                e.stopPropagation()
+                                if(this.props.window.orgBodyOverflow!=null){
+                                    document.body.style.overflow=this.props.window.orgBodyOverflow
+                                }
                                 this.props.window.props.setOpen(false)
                             }}
+                            onMouseDown={(e)=>{
+                                e.stopPropagation()
+                            }}
                         />
                         :null
                 }

package/src/index.js

@@ -4,8 +4,9 @@ import JRTable from './components/JRTable/JRTable'
 import JRFields from './components/JRFields/JRFields'
 import JRTestReact from './components/JRTest'
 import JRButton from './components/JRInput/JRButton'
+import JRWindow from './components/JRWindow/JRWindow'
 export {
     JRTestReact
-    ,JRSubmit,JRFrame,JRTable,JRFields
+    ,JRSubmit,JRFrame,JRWindow,JRTable,JRFields
     ,JRButton
 }

package/src/main.jsx

@@ -3,4 +3,5 @@ import { createRoot } from 'react-dom/client'
 import './app/index.css'
 import App from './app/App.jsx'
 
-createRoot(document.getElementById('root')).render(<App/>)
+const root = createRoot(document.getElementById('root'))
+root.render(<App/>)

package/src/components/JRUtil.jsx

@@ -1 +0,0 @@
-export const po=console.debug