-
-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Austin 5/3 updated Tutorial, Refactored Electron
> > Co-author-by: Zack Vandiver <[email protected]> Co-author-by: Heather Pfeiffer <[email protected]> Co-author-by: Austin Alvarez <InvectivusTaco> Co-author-by: Jesse Wowczuk <[email protected]>
- Loading branch information
Showing
23 changed files
with
6,830 additions
and
1,189 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,85 @@ | ||
| import React, { useEffect, useRef, useState } from 'react'; | ||
| import BottomTabs from './BottomTabs'; | ||
| import { ExpandLess, ExpandMore } from '@mui/icons-material'; | ||
|
|
||
| const BottomPanel = (props): JSX.Element => { | ||
| let y: number = 0; | ||
| let h: number = 0; | ||
| const node = useRef() as React.MutableRefObject<HTMLDivElement>; | ||
|
|
||
| const [isDragging, setIsDragging] = useState(false); | ||
|
|
||
| const mouseDownHandler = (e): void => { | ||
| y = e.clientY; | ||
|
|
||
| const styles = window.getComputedStyle(node.current); | ||
| h = parseInt(styles.height, 10); | ||
|
|
||
| document.addEventListener('mousemove', mouseMoveHandler); | ||
| document.addEventListener('mouseup', mouseUpHandler); | ||
| window.addEventListener('message', handleIframeMessage); //listens for messages from the iframe when the mouse is over it | ||
| }; | ||
|
|
||
| //Interpret the messages from the iframe | ||
| const handleIframeMessage = (e) => { | ||
| if (e.data === 'iframeMouseUp') { | ||
| mouseUpHandler(); | ||
| } else if (e.data.type === 'iframeMouseMove') { | ||
| mouseMoveHandler(e.data); | ||
| } | ||
| }; | ||
|
|
||
| const mouseMoveHandler = function (e: MouseEvent): void { | ||
| if (!props.bottomShow) return; // prevent drag calculation to occur when bottom menu is not showing | ||
|
|
||
| const dy = y - e.clientY; | ||
|
|
||
| const newVal = h + dy; | ||
| const styles = window.getComputedStyle(node.current); | ||
| const min = parseInt(styles.minHeight, 10); | ||
| node.current.style.height = newVal > min ? `${h + dy}px` : `${min}px`; | ||
| }; | ||
|
|
||
| const mouseUpHandler = function () { | ||
| // puts false in callback queue after OnDragStart sets to true (b/c react 17 doesn't have onDragEnd) | ||
| setTimeout(() => setIsDragging(false), 0); | ||
| document.removeEventListener('mousemove', mouseMoveHandler); | ||
| document.removeEventListener('mouseup', mouseUpHandler); | ||
| window.removeEventListener('message', handleIframeMessage); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| node.current.style.height = '50vh'; | ||
| node.current.style.minHeight = '50vh'; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="bottom-panel" id="resize" ref={node}> | ||
| <div | ||
| id="resize-drag" | ||
| onMouseDown={mouseDownHandler} | ||
| draggable | ||
| onDragStart={() => setIsDragging(true)} | ||
| onClick={() => !isDragging && props.setBottomShow(!props.bottomShow)} | ||
| tabIndex={0} | ||
| > | ||
| {props.bottomShow ? <ExpandMore /> : <ExpandLess />} | ||
| </div> | ||
| <BottomTabs | ||
| setBottomShow={props.setBottomShow} | ||
| isThemeLight={props.isThemeLight} | ||
| /> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default BottomPanel; | ||
| import React, { useEffect, useRef, useState } from 'react'; | ||
| import BottomTabs from './BottomTabs'; | ||
| import { ExpandLess, ExpandMore } from '@mui/icons-material'; | ||
|
|
||
| const BottomPanel = (props): JSX.Element => { | ||
| let y: number = 0; | ||
| let h: number = 0; | ||
| const node = useRef() as React.MutableRefObject<HTMLDivElement>; | ||
|
|
||
| const [isDragging, setIsDragging] = useState(false); | ||
|
|
||
| const mouseDownHandler = (e): void => { | ||
| y = e.clientY; | ||
|
|
||
| const styles = window.getComputedStyle(node.current); | ||
| h = parseInt(styles.height, 10); | ||
|
|
||
| document.addEventListener('mousemove', mouseMoveHandler); | ||
| document.addEventListener('mouseup', mouseUpHandler); | ||
| window.addEventListener('message', handleIframeMessage); //listens for messages from the iframe when the mouse is over it | ||
| }; | ||
|
|
||
| //Interpret the messages from the iframe | ||
| const handleIframeMessage = (e) => { | ||
| if (e.data === 'iframeMouseUp') { | ||
| mouseUpHandler(); | ||
| } else if (e.data.type === 'iframeMouseMove') { | ||
| mouseMoveHandler(e.data); | ||
| } | ||
| }; | ||
|
|
||
| const mouseMoveHandler = function (e: MouseEvent): void { | ||
| if (!props.bottomShow) return; // prevent drag calculation to occur when bottom menu is not showing | ||
|
|
||
| const dy = y - e.clientY; | ||
| const newHeight = h + dy; | ||
|
|
||
| const styles = window.getComputedStyle(node.current); | ||
| const minHeight = parseInt(styles.minHeight, 10); | ||
| const maxHeight = window.innerHeight * 0.8; // Set a maximum height, e.g., 90% of window height | ||
|
|
||
| node.current.style.height = `${Math.max(minHeight, Math.min(maxHeight, newHeight))}px`; | ||
| }; | ||
|
|
||
| const mouseUpHandler = function () { | ||
| // puts false in callback queue after OnDragStart sets to true (b/c react 17 doesn't have onDragEnd) | ||
| setTimeout(() => setIsDragging(false), 0); | ||
| document.removeEventListener('mousemove', mouseMoveHandler); | ||
| document.removeEventListener('mouseup', mouseUpHandler); | ||
| window.removeEventListener('message', handleIframeMessage); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (props.bottomShow) { | ||
| node.current.style.height = '50vh'; // Initial height when bottom panel is open | ||
| node.current.style.minHeight = '20vh'; // Minimum height when bottom panel is open | ||
| } else { | ||
| node.current.style.height = '0.1'; // Initial height when bottom panel is closed | ||
| node.current.style.minHeight = '0.1'; // Minimum height when bottom panel is closed | ||
| } | ||
| }, [props.bottomShow]); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="bottom-panel" id="resize" ref={node} > | ||
| <div | ||
| id="resize-drag" | ||
| onMouseDown={mouseDownHandler} | ||
| draggable | ||
| onDragStart={() => setIsDragging(true)} | ||
| onClick={() => !isDragging && props.setBottomShow(!props.bottomShow)} | ||
| tabIndex={0} | ||
| > | ||
| {props.bottomShow ? <ExpandMore /> : <ExpandLess />} | ||
| </div> | ||
| <BottomTabs | ||
| setBottomShow={props.setBottomShow} | ||
| isThemeLight={props.isThemeLight} | ||
| /> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default BottomPanel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Button, TextField } from "@mui/material"; | ||
| import { Send } from "@mui/icons-material"; | ||
| import MUITypes from "../../redux/MUITypes"; | ||
| import { MUIType } from '../../interfaces/Interfaces'; | ||
| import { emitEvent } from '../../helperFunctions/socket'; | ||
|
|
||
| const MUIProps = (props): JSX.Element => { | ||
| const [selectedComponent, setSelectedComponent] = useState<MUIType | null>(null); | ||
|
|
||
| const handleComponentSelect = (component: MUIType) => { | ||
| setSelectedComponent(component); | ||
| }; | ||
|
|
||
| const handleSend = () => { | ||
| if (selectedComponent) { | ||
| emitEvent("add-component", selectedComponent, {placeholder: "Placeholder"}); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <div style={{ display: "flex", flexDirection: "column" }}> | ||
| {MUITypes.map((component) => ( | ||
| <Button | ||
| key={component.id} | ||
| onClick={() => handleComponentSelect(component)} | ||
| sx={{ marginBottom: "0.5rem" }} | ||
| > | ||
| {component.name} | ||
| </Button> | ||
| ))} | ||
| </div> | ||
| <Button | ||
| onClick={handleSend} | ||
| variant="contained" | ||
| endIcon={<Send />} | ||
| sx={{ marginTop: "1rem" }} | ||
| > | ||
| Save | ||
| </Button> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MUIProps; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.