jrs-react 1.2.4 → 1.2.6

package/src/components/JRWindow/Slider.jsx

@@ -0,0 +1,251 @@
+import React from "react"
+import styled from "styled-components"
+import { po } from "../JRUtils"
+
+const borderWidth='px'
+
+const StyledSlider=styled.div`
+    Xborder:1px solid ${({$direction:{color}})=>color}; 
+    xbackground:${({$direction:{color}})=>color};
+    position: absolute;
+    top: ${({$direction:{top}})=>top};
+    bottom: ${({$direction:{bottom}})=>bottom};
+    right: ${({$direction:{right}})=>right};
+    left: ${({$direction:{left}})=>left};
+    height: ${({$direction:{height}})=>height};
+    width: ${({$direction:{width}})=>width};
+    cursor: ${({$direction:{cursor}})=>cursor};
+
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+
+`
+export default class Slider extends React.Component {
+    width='3px'
+    borderWidth='px'
+    borderLong='10px'
+
+    constructor(props){
+        super(props);
+        this.sliderRef=React.createRef()
+    }
+    directions={
+        n:{
+            top:0
+            ,color:'red'
+            ,width:'100%'
+            ,height:`${this.props.thick}px`
+            ,cursor: 'n-resize'
+            ,resize:(props)=>{
+                this.resizeN(props)
+            }
+
+        }
+        ,e:{
+            color:'yellow'
+            ,right:0
+            ,width:`${this.props.thick}px`
+            ,height:'100%'
+            ,cursor: 'e-resize'
+            ,resize:(props)=>{
+                this.resizeE(props)
+            }
+        }
+        ,s:{
+            color:'blue'
+            ,bottom:0
+            ,width:'100%'
+            ,height:`${this.props.thick}px`
+            ,cursor: 's-resize'
+            ,resize:(props)=>{
+                this.resizeS(props)
+            }
+        }
+        ,w:{
+            color:'green'
+            ,left:0
+            ,width:`${this.props.thick}px`
+            ,height:'100%'
+            ,cursor: 'w-resize'
+            ,resize:(props)=>{
+                this.resizeW(props)
+            }
+        }
+        ,nww:{
+            top:0
+            ,left:0
+            ,color:'blue'
+            ,width:`${this.props.thick}px`
+            ,height:this.borderLong
+            ,cursor: 'nw-resize'
+            ,resize:(props)=>{
+                this.resizeN(props)
+                this.resizeW(props)
+            }
+        }
+        ,nnw:{
+            top:0
+            ,left:0
+            ,color:'blue'
+            ,width:this.borderLong
+            ,height:`${this.props.thick}px`
+            ,cursor: 'nw-resize'
+            ,resize:(props)=>{
+                this.resizeN(props)
+                this.resizeW(props)
+            }
+        }
+        ,nne:{
+            top:0
+            ,right:0
+            ,color:'green'
+            ,width:this.borderLong
+            ,height:`${this.props.thick}px`
+            ,cursor: 'ne-resize'
+            ,resize:(props)=>{
+                this.resizeN(props)
+                this.resizeE(props)
+            }
+        }
+        ,nee:{
+            top:0
+            ,right:0
+            ,color:'green'
+            ,width:`${this.props.thick}px`
+            ,height:this.borderLong
+            ,cursor: 'ne-resize'
+            ,resize:(props)=>{
+                this.resizeN(props)
+                this.resizeE(props)
+            }
+        }
+        ,sse:{
+            color:'red'
+            ,right:0
+            ,bottom:0
+            ,width:this.borderLong
+            ,height:`${this.props.thick}px`
+            ,cursor: 'se-resize'
+            ,resize:(props)=>{
+                this.resizeS(props)
+                this.resizeE(props)
+            }
+        }
+        ,see:{
+            color:'red'
+            ,right:0
+            ,bottom:0
+            ,width:`${this.props.thick}px`
+            ,height:this.borderLong
+            ,cursor: 'se-resize'
+            ,resize:(props)=>{
+                this.resizeS(props)
+                this.resizeE(props)
+            }
+        }
+        ,ssw:{
+            color:'yellow'
+            ,bottom:0
+            ,left:0
+            ,width:this.borderLong
+            ,height:`${this.props.thick}px`
+            ,cursor: 'sw-resize'
+            ,resize:(props)=>{
+                this.resizeS(props)
+                this.resizeW(props)
+            }
+        }
+        ,sww:{
+            color:'yellow'
+            ,bottom:0
+            ,left:0
+            ,width:`${this.props.thick}px`
+            ,height:this.borderLong
+            ,cursor: 'sw-resize'
+            ,resize:(props)=>{
+                this.resizeS(props)
+                this.resizeW(props)
+            }
+        }
+    }
+
+    stop=(e)=>{
+        document.body.style.cursor='default'
+        window.removeEventListener('mousemove',this.move)
+        window.removeEventListener('mouseup',this.stop)
+    }
+
+    resizeN=({window,cursorY,startY,startHeight,titleBarHeight})=>{
+        let y=cursorY-(this.props.thick)
+        if(y<0)y=0
+        let height=startHeight+(startY-y)
+        if(height<titleBarHeight+(this.props.thick*2)){
+            height=titleBarHeight+(this.props.thick*2)
+            y=startY + startHeight - titleBarHeight - (this.props.thick*2)
+        }
+        window.style.top=`${y}px`
+        window.style.height=`${height}px`
+
+    }
+    resizeE=({window,clientX,left,titleBarHeight})=>{
+        let width=clientX-left-this.props.thick
+        if(width<titleBarHeight)width=titleBarHeight
+        window.style.width=`${width+(this.props.thick*2)}px`
+    }
+    resizeS=({window,clientY,top,titleBarHeight})=>{
+        let height=clientY-top-this.props.thick
+        if(height<titleBarHeight)height=titleBarHeight
+        window.style.height=`${height+(this.props.thick*2)}px`
+    }
+    resizeW=({window,cursorX,startX,startWidth,titleBarHeight})=>{
+        let x=cursorX
+        if(x<=1)x=1
+        let width=startWidth+(startX-x)
+        if(width<titleBarHeight+ (this.props.thick*2)){
+            width=titleBarHeight+ (this.props.thick*2)
+            x=startX+startWidth -titleBarHeight - (this.props.thick*2)
+        }
+        window.style.left=`${x}px`
+        window.style.width=`${width}px`
+    }
+    move=(e)=>{
+        const {clientX,clientY,x:cursorX,y:cursorY}=e
+        const window=this.props.windowRef.current
+        const {left,top}=window.getBoundingClientRect()
+        const {x:startX,width:startWidth,y:startY,height:startHeight,titleBarHeight}=this.data
+        
+        this.directions[this.props.direction].resize({
+            window,titleBarHeight
+            ,clientX,cursorX,startX,startWidth,left
+            ,clientY,cursorY,startY,startHeight,top
+        })
+        /////////////////////////////////////////////////////////////
+
+
+
+
+        /////////////////////////////////////////////////////////////
+        
+  
+
+    }
+    start=()=>{
+        const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
+        const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
+        this.data={x,y,width,height,titleBarHeight}
+        document.body.style.cursor=this.directions[this.props.direction].cursor
+        window.addEventListener('mousemove',this.move)
+        window.addEventListener('mouseup',this.stop)
+    }
+
+    render(){
+        return <StyledSlider 
+            $direction={this.directions[this.props.direction]}
+            $padding={this.props.padding}
+            onMouseDown={this.start}
+        />
+    }
+}

package/src/components/JRWindow/TitleBar.jsx

@@ -0,0 +1,84 @@
+import styled from "styled-components";
+import { po } from "../JRUtils";
+import React from "react";
+import { FreeType } from "../JRFrame/JRFrame";
+
+const StyledTitle=styled.div`
+    overflow: hidden;
+    display: flex;
+    padding:2px 8px;
+    border:1px solid black;
+    background:rgb(214, 214, 214);
+    color: black;
+    &:active:hover{
+        cursor: grabbing;
+    }
+    
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+
+    > .title{
+            flex: 1;
+    }
+`
+
+
+
+
+export default class TitleBar extends React.Component{
+    pos1 = 0
+    pos2 = 0 
+    pos3 = 0 
+    pos4 = 0
+    x=0
+    y=0
+
+    move=(e)=>{
+        e.preventDefault()
+        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 w= this.props.windowRef.current
+        this.x=w.offsetLeft - this.pos1
+        this.y=w.offsetTop - this.pos2
+        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.pos3 = e.clientX
+        this.pos4 = e.clientY
+
+        document.body.style.cursor='grabbing'
+        window.addEventListener('mousemove',this.move)
+        window.addEventListener('mouseup',this.stop)
+    }
+    render(){
+        return <StyledTitle
+            ref={this.props.titleBarRef}
+            draggable="false"
+            onMouseDown={(e)=>{
+                this.start(e)
+            }}
+        >
+            <FreeType tag='div' config={this.props.title??''} me={this.props.window} className={'title'}/>
+            <nav><button>X</button></nav>
+        </StyledTitle>
+    }
+}

package/src/main.jsx

@@ -0,0 +1,6 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './app/index.css'
+import App from './app/App.jsx'
+
+createRoot(document.getElementById('root')).render(<App/>)

package/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})