Merge branch 'dev'

frontend/src/components/selectedRepository/selectedRepoRight/branches/BranchPanel.tsx

@@ -1,8 +1,8 @@
 import { ICommitInfo, IRepositoryDetails } from "common_library";
-import React, { useMemo, useRef } from "react"
+import React, { Fragment, useMemo, useRef, useState } from "react"
 import { useEffect } from "react";
 import { shallowEqual } from "react-redux";
-import { useMultiState } from "../../../../lib";
+import { BranchUtils, IViewBox, useMultiState } from "../../../../lib";
 import { useDrag } from "../../../../lib/hooks/useDrag";
 import { useSelectorTyped } from "../../../../store/rootReducer";
 import { SingleBranch } from "./SingleBranch";
@@ -18,83 +18,84 @@ interface IState{
     scrollLeft:number;
     horizontalScrollRatio:number;
     verticalScrollRatio:number;
-    viewBox:{x:number;y:number;width:number;height:number};
+    viewBox:IViewBox;
     notScrolledHorizontallyYet:boolean;
     notScrolledVerticallyYet:boolean;
     verticalScrollTop:number;
     horizontalScrollLeft:number;
+    panelWidth:number;
+    horizontalScrollWidth:number;
+    zoomValue:number;
 }
 
 function BranchPanelComponent(props:IBranchPanelProps){
     const panelHeight = 400;
-    const panelWidth = 865;
-    const horizontalScrollContainerWidth = panelWidth+10;
+    //const panelWidth = 865;
     const store = useSelectorTyped(state=>({
         zoom:state.ui.versions.branchPanelZoom,
     }),shallowEqual);
 
     useEffect(()=>{
         //setState({scale:1+ (store.zoom/10)});        
-    },[store.zoom])
+    },[store.zoom])    
 
     const [state,setState]=useMultiState<IState>({
         scrollLeft:props.repoDetails.branchPanelWidth,
         scrollTop:0,
         horizontalScrollRatio:0,
         verticalScrollRatio:0,
-        viewBox:{x:props.repoDetails.branchPanelWidth - panelWidth,y:0,width:panelWidth,height:panelHeight},
+        viewBox:{x:0,y:0,width:0,height:0},
         notScrolledHorizontallyYet:true,
         notScrolledVerticallyYet:true,
         verticalScrollTop:0,
         horizontalScrollLeft:0,
+        panelWidth:-1,
+        horizontalScrollWidth:0,
+        zoomValue:0,
     });
 
+    const horizontalScrollContainerWidth = state.panelWidth+10;
+
+
     const dataRef = useRef({
         initialHorizontalScrollLeft:0,
         initialVerticalScrollTop:0,
+        isMounted:false,
     });
 
-    const isMounted = useRef(false);
+    const horizontalScrollContainerRef = useRef<HTMLDivElement>();
     useEffect(()=>{
-        isMounted.current = true;
-    },[])
-
-    const horizontalScrollWidth = useMemo(()=>{
-        let totalWidth = props.repoDetails.branchPanelWidth;
-        if(totalWidth < panelWidth) totalWidth = panelWidth;
-        const width = state.viewBox.width / totalWidth;
-        return width*panelWidth;
-    },[state.viewBox.width,props.repoDetails.branchPanelWidth]);
+        dataRef.current.isMounted = true;
+    },[])    
 
     const verticalScrollHeight = useMemo(()=>{        
         let totalHeight = props.repoDetails.branchPanelHeight;
         if(totalHeight < panelHeight) totalHeight = panelHeight;
         const height = state.viewBox.height / totalHeight;        
         return height*panelHeight;
-    },[state.viewBox.height,props.repoDetails.branchPanelHeight]);
+    },[state.viewBox.height,props.repoDetails.branchPanelHeight]);    
 
     useEffect(()=>{
-        if(props.repoDetails?.headCommit) {
+        if(props.repoDetails?.headCommit && state.panelWidth !== -1) {
             let elmnt = document.getElementById(props.repoDetails.headCommit.hash);
             if(elmnt) elmnt.scrollIntoView();            
         }
         else return;
         let totalWidth = props.repoDetails.branchPanelWidth;
         let totalHeight = props.repoDetails.branchPanelHeight;
         if(totalHeight < panelHeight) totalHeight = panelHeight;
-        if(totalWidth < panelWidth) totalHeight = panelWidth;
+        debugger;
+        if(totalWidth < state.panelWidth) totalHeight = state.panelWidth;
         const horizontalRatio = props.repoDetails?.headCommit.x/totalWidth;
         const verticalRatio = props.repoDetails?.headCommit.ownerBranch.y/totalHeight;
-        const verticalScrollTop = (panelHeight-verticalScrollHeight)*verticalRatio;
-        const horizontalScrollLeft = (panelWidth-horizontalScrollWidth)*horizontalRatio;
+        let verticalScrollTop = (panelHeight-verticalScrollHeight)*verticalRatio;        
+        let horizontalScrollLeft = (horizontalScrollContainerWidth-state.horizontalScrollWidth)*horizontalRatio;        
         dataRef.current.initialVerticalScrollTop = verticalScrollTop;
         dataRef.current.initialHorizontalScrollLeft = horizontalScrollLeft;
 
         const x = totalWidth *horizontalRatio;
         let viewBoxX = 0;
-        if(totalWidth > panelWidth) viewBoxX = x- (panelWidth/2);
-
-
+        if(totalWidth > state.panelWidth) viewBoxX = x- (state.panelWidth/2);
 
         const y = totalHeight *verticalRatio;
         let viewBoxY = 0;
@@ -109,10 +110,12 @@ function BranchPanelComponent(props:IBranchPanelProps){
                 ...state.viewBox,
                 x:viewBoxX,
                 y:viewBoxY,
+                width:state.panelWidth,
+                height:panelHeight,
             }
         });
 
-    },[props.repoDetails?.headCommit])                
+    },[props.repoDetails?.headCommit,state.panelWidth])                
 
     const {currentMousePosition: horizontalScrollMousePosition,elementRef: horizontalScrollElementRef} = useDrag();
     const {currentMousePosition:verticalScrollMousePosition,elementRef:verticalScrollElementRef} = useDrag();
@@ -123,18 +126,18 @@ function BranchPanelComponent(props:IBranchPanelProps){
             }
         }
         else{
-            if(panelWidth <= horizontalScrollWidth) return;
+            if(state.panelWidth <= state.horizontalScrollWidth) return;
             let newLeft = dataRef.current.initialHorizontalScrollLeft+ horizontalScrollMousePosition!.x;
-            const maxLeft = panelWidth - horizontalScrollWidth;
+            const maxLeft = state.panelWidth - state.horizontalScrollWidth;
             if(newLeft < 0) newLeft = 0;
             else if(newLeft > maxLeft) newLeft = maxLeft;
             let newRatio = newLeft/maxLeft;            
 
             let totalWidth = props.repoDetails.branchPanelWidth;
-            if(totalWidth < panelWidth) totalWidth = panelWidth;
+            if(totalWidth <state.panelWidth) totalWidth = state.panelWidth;
 
             const x = totalWidth *newRatio;
-            let viewBoxX = x - (panelWidth/2);            
+            let viewBoxX = x - (state.panelWidth/2);            
 
             setState({
                 horizontalScrollRatio: newRatio,
@@ -177,41 +180,67 @@ function BranchPanelComponent(props:IBranchPanelProps){
                 }
             })
         }        
-    },[verticalScrollMousePosition])             
+    },[verticalScrollMousePosition])
+
+
+
+    useEffect(()=>{
+        if(horizontalScrollContainerRef.current){
+            const width = Math.floor(horizontalScrollContainerRef.current.getBoundingClientRect().width);
+            const newPanelWidth = width-10;
+            if(state.panelWidth != newPanelWidth){
+                let viewBox = {x:state.viewBox.x,y:state.viewBox.y} as IViewBox;
+                viewBox.width = newPanelWidth;
+                viewBox.height = panelHeight;
+                viewBox = BranchUtils.getViewBoxValue(viewBox,1);
+                let totalWidth = props.repoDetails.branchPanelWidth;
+                if(totalWidth < newPanelWidth) totalWidth = newPanelWidth;
+                const widthRatio = viewBox.width / totalWidth;
+                const horizontalScrollWidth = widthRatio*width;
+                setState({
+                    panelWidth:newPanelWidth,
+                    viewBox:viewBox,
+                    horizontalScrollWidth:horizontalScrollWidth,
+                });
+            }
+        }
+    },[horizontalScrollContainerRef.current])        
 
     if(!props.repoDetails) return <span className="d-flex justify-content-center w-100">Loading...</span>;
 
-    return <div id="branchPanel" className="w-100 overflow-x-hidden">
-        <div className="d-flex align-items-stretch" style={{width:`${horizontalScrollContainerWidth}px`}}>
-            <svg width={panelWidth} height={panelHeight} viewBox={`${state.viewBox.x} ${state.viewBox.y} ${state.viewBox.width} ${state.viewBox.height}` } style={{transform:`scale(1)`} }>
-                    <g>
-                        {
-                            props.repoDetails.mergedLines.map(line=>(
-                                <line key={`${line.srcX}-${line.srcY}-${line.endX}-${line.endY}`} x1={line.srcX} y1={line.srcY} x2={line.endX} y2={line.endY} stroke="green" strokeWidth={1} />
-                            ))
-                        }
-                        {
-                            props.repoDetails.resolvedBranches.map(branch=>(
-                                <SingleBranch key={branch._id} 
-                                    branchDetails ={branch} 
-                                    onCommitSelect={props.onCommitSelect} 
-                                    selectedCommit={props.selectedCommit} 
-                                    scrollLeft={(state.scrollLeft)}
-                                    scrollTop={state.scrollTop} 
-                                    panelWidth={panelWidth}
-
-                                />
-                            ))
-                        }                                        
-                    </g>
-            </svg>
-            <div className="d-flex bg-secondary position-relative" style={{width:`10px`}}>
-                <div ref={verticalScrollElementRef as any} className="bg-danger position-absolute w-100" style={{height:`${verticalScrollHeight}px`,top:state.verticalScrollTop,left:0}}> </div>
-            </div>
-        </div>            
-            <div className="d-flex w-100 bg-secondary py-2 position-relative" style={{width:`${horizontalScrollContainerWidth}px`}}>
-                <div ref={horizontalScrollElementRef as any} className="position-absolute bg-danger h-100" style={{width:`${horizontalScrollWidth}px`, left:state.horizontalScrollLeft,top:0}}></div>
-            </div>
+    return <div ref={horizontalScrollContainerRef as any} id="branchPanel" className="w-100 overflow-hidden">
+        {state.panelWidth !== -1 && <Fragment>
+            <div className="d-flex align-items-stretch" style={{width:`${horizontalScrollContainerWidth}px`}}>
+                <svg width={state.panelWidth} height={panelHeight} viewBox={`${state.viewBox.x} ${state.viewBox.y} ${state.viewBox.width} ${state.viewBox.height}` } style={{transform:`scale(1)`} }>
+                        <g>
+                            {
+                                props.repoDetails.mergedLines.map(line=>(
+                                    <line key={`${line.srcX}-${line.srcY}-${line.endX}-${line.endY}`} x1={line.srcX} y1={line.srcY} x2={line.endX} y2={line.endY} stroke="green" strokeWidth={1} />
+                                ))
+                            }
+                            {
+                                props.repoDetails.resolvedBranches.map(branch=>(
+                                    <SingleBranch key={branch._id} 
+                                        branchDetails ={branch} 
+                                        onCommitSelect={props.onCommitSelect} 
+                                        selectedCommit={props.selectedCommit} 
+                                        scrollLeft={(state.scrollLeft)}
+                                        scrollTop={state.scrollTop} 
+                                        panelWidth={state.panelWidth}
+
+                                    />
+                                ))
+                            }                                        
+                        </g>
+                </svg>
+                <div className="d-flex bg-secondary position-relative" style={{width:`10px`}}>
+                    <div ref={verticalScrollElementRef as any} className="bg-danger position-absolute w-100" style={{height:`${verticalScrollHeight}px`,top:state.verticalScrollTop,left:0}}> </div>
+                </div>
+            </div>            
+            <div className="d-flex bg-secondary py-2 position-relative" style={{width:`${horizontalScrollContainerWidth}px`}}>
+                <div ref={horizontalScrollElementRef as any} className="position-absolute bg-danger h-100" style={{width:`${state.horizontalScrollWidth}px`, left:state.horizontalScrollLeft,top:0}}></div>
+            </div>           
+        </Fragment>}
     </div>
 }
 

frontend/src/lib/interfaces/IViewBox.ts

@@ -0,0 +1,6 @@
+export interface IViewBox{
+    x:number;
+    y:number;
+    width:number;
+    height:number;
+}

frontend/src/lib/interfaces/index.ts

@@ -1,3 +1,4 @@
 export * from './IElectionjs';
 export * from './globalTypes';
-export * from './ILine';
+export * from './ILine';
+export * from './IViewBox';

frontend/src/lib/utils/BranchUtils.ts

@@ -1,4 +1,5 @@
 import { createBranchDetailsObj, createMergeLineObj, IBranchDetails, IBranchRemote, ICommitInfo, ILastReference, IMergeLine, IRepositoryDetails, StringUtils } from "common_library";
+import { IViewBox } from "../interfaces";
 
 export class BranchUtils{
     static readonly headPrefix = "HEAD -> ";
@@ -273,4 +274,16 @@ export class BranchUtils{
         branchRemote.remote = remote;        
         return branchRemote;
     }
+
+    static getViewBoxValue(currentValue:IViewBox,zoomStep:number){
+        if(zoomStep === 0) return {...currentValue};
+        const newViewBox = {} as IViewBox;
+        const pxPerZoom = 10;
+        const changedPx = pxPerZoom*zoomStep;
+        newViewBox.x = currentValue.x + changedPx;
+        newViewBox.y = currentValue.y + changedPx;
+        newViewBox.width = currentValue.width - (changedPx*2);
+        newViewBox.height = currentValue.height - (changedPx*2);
+        return newViewBox;
+    }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitstudio",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.2",
   "description": "A git gui application",
   "scripts": {
     "build": "tsc",

src/Startup.ts

@@ -99,12 +99,12 @@ export class Startup{
       const app = express();
 
       // serve static assets normally
-      app.use(express.static(__dirname + '/build'));
+      app.use(express.static(__dirname + '/frontend'));
 
       // handle every other route with index.html, which will contain
       // a script tag to your application's JavaScript file(s).
       app.get('*', function (request, response) {
-        response.sendFile(path.resolve(__dirname,"build", 'index.html'));
+        response.sendFile(path.resolve(__dirname,"frontend", 'index.html'));
       });
 
       app.listen(this.uiPort);
@@ -123,6 +123,7 @@ export class Startup{
           },
           width: 800,
         });
+        mainWindow.maximize();
         AppData.mainWindow = mainWindow;
         mainWindow.loadURL(`http://localhost:${this.uiPort}`);