jrs-react 1.2.7 → 1.2.8

package/src/components/JRWindow/TitleBar.jsx

@@ -2,12 +2,14 @@ import styled from "styled-components";
 import { po } from "../JRUtils";
 import React from "react";
 import { FreeType } from "../JRFrame/JRFrame";
+import { IconX,IconCard, IconSquare, IconMinus } from "../../assets/icon";
+import { background } from "storybook/internal/theming";
+import JRButton from "../JRInput/JRButton";
 
 const StyledTitle=styled.div`
     overflow: hidden;
     display: flex;
-    padding:2px 8px;
-    border:1px solid black;
+    border-radius: var(--jr-window-radius) var(--jr-window-radius) 0 0;
     background:rgb(214, 214, 214);
     color: black;
     &:active:hover{
@@ -21,7 +23,44 @@ const StyledTitle=styled.div`
     user-select: none;
 
     > .title{
-            flex: 1;
+
+        flex: 1;
+        padding:2px 0 2px 8px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    > nav{
+        display: flex;
+        align-items: anchor-center;
+
+
+        >button{
+            display:flex;
+            align-items: center;
+            justify-content: center;
+            border: unset;
+            background: unset;
+            cursor: pointer;
+            width:32px;
+            height:32px;
+            xborder:1px solid green;
+            padding: 0;
+            margin: 0;
+            &:hover{
+                background: #bbbbbb;
+                color:white;
+            }
+            >svg{
+                width:14px;
+                height:14px;
+                cursor: pointer;
+            }
+        }
+        >button.danger:hover{
+            background: red;
+            color:white;
+        } 
     }
 `
 
@@ -36,35 +75,67 @@ export default class TitleBar extends React.Component{
     x=0
     y=0
 
+    stop=(e)=>{
+        e.preventDefault()
+        if(this.moved){
+
+        
+            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(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'
+        }
+        window.removeEventListener('mousemove',this.move)
+        window.removeEventListener('mouseup',this.stop)
+    }
     move=(e)=>{
         e.preventDefault()
+        this.moved=true
         const {clientX,clientY}=e
-        this.pos1 = this.pos3 - e.clientX
-        this.pos2 = this.pos4 - e.clientY
-        this.pos3 = e.clientX
-        this.pos4 = e.clientY
+        const y=clientY<1 ?0 :clientY
+        this.pos1 = this.pos3 - clientX
+        this.pos2 = this.pos4 - y
+        this.pos3 = clientX
+        this.pos4 = y
 
         const w= this.props.windowRef.current
         this.x=w.offsetLeft - this.pos1
         this.y=w.offsetTop - this.pos2
+
+        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.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.top = this.y + 'px'
         w.style.left = this.x + 'px'
     }
-    stop=(e)=>{
-        // const w= this.props.windowRef.current
-        // if(this.y<1)this.props.windowRef.current.style.top = '1px'
-        // if(this.y>window.innerHeight)this.props.windowRef.current.style.top = `${window.innerHeight-32}px`
-        // if(this.x<1)this.props.windowRef.current.style.left = '1px'
-        // if(this.x>window.innerWidth)this.props.windowRef.current.style.left = `${window.innerWidth-100}px`
-        document.body.style.cursor='default'
-        window.removeEventListener('mousemove',this.move)
-        window.removeEventListener('mouseup',this.stop)
-    }
     start(e){
         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('mouseup',this.stop)
@@ -78,7 +149,21 @@ export default class TitleBar extends React.Component{
             }}
         >
             <FreeType tag='div' config={this.props.title??''} me={this.props.window} className={'title'}/>
-            <nav><button>X</button></nav>
+            <nav>
+                <JRButton icon={<IconMinus />}/>
+                <JRButton icon={<IconSquare />}/>
+                {
+                    this.props.window.props.setOpen
+                        ?<JRButton icon={<IconX />} 
+                            className={'danger'}
+                            onClick={()=>{
+                                this.props.window.props.setOpen(false)
+                            }}
+                        />
+                        :null
+                }
+
+            </nav>
         </StyledTitle>
     }
 }

package/vite.config.js

@@ -1,7 +1,15 @@
 import { defineConfig } from 'vite'
+import svgr from 'vite-plugin-svgr'
 import react from '@vitejs/plugin-react'
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+	plugins: [
+		react()
+		,svgr({
+			include: '**/*.svg',
+			svgrOptions: {
+			  	exportType: 'default',
+			}
+		})
+	]
 })