Skip to content

Commit 1133f12

Browse files
Eliza612Eliza612
authored
Merge pull request #29 from oslabs-beta/BrianMovingbuttons2
Brian movingbuttons2
2 parents e10bf22 + 108edf7 commit 1133f12

File tree

11 files changed

+185
-152
lines changed

11 files changed

+185
-152
lines changed

‎app/src/Dashboard/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
flex-direction: column-reverse;
3131
flex-flow: row wrap;
3232
flex-grow: 1;
33-
overflow-y: scroll;
33+
overflow-y: scroll;
3434
}
3535

3636
.projectInfo {

‎app/src/components/bottom/CodePreview.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ import { initializeEsbuild } from '../../helperFunctions/esbuildService';
2222
const CodePreview: React.FC<{
2323
theme: string | null;
2424
setTheme: any | null;
25-
}> = ({ theme, setTheme }) => {
25+
zoom: number;
26+
containerRef: any;
27+
}> = ({ theme, setTheme, zoom, containerRef }) => {
2628
const ref = useRef<any>();
2729

2830
const dispatch = useDispatch();
@@ -84,7 +86,8 @@ const CodePreview: React.FC<{
8486
top: '1vw',
8587
height: '100%',
8688
maxWidth: '100%',
87-
justifyContent: 'center'
89+
justifyContent: 'center',
90+
transform: `scale(${zoom})`
8891
}}
8992
>
9093
<AceEditor

‎app/src/components/left/ComponentsContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const useStyles = makeStyles({
4545
flexDirection: 'column',
4646
alignItems: 'center',
4747
flexGrow: 1,
48-
overflow: 'auto'
48+
overflow: 'auto'
4949
},
5050
panelWrapperList: {
5151
minHeight: '120px'

‎app/src/components/left/ProfilePage.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,11 @@ const ProfilePage = () => {
4343
return (
4444
<Card sx={{ minWidth: 275, color: 'white', backgroundColor: 'black' }}>
4545
<CardContent>
46-
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
47-
Hi,
48-
</Typography>
4946
<Typography variant="h5" component="div" sx={{ color: '#019cde' }}>
5047
{username ? username : null}
5148
</Typography>
5249
<Typography sx={{ mb: 1.5 }} color="text.secondary">
53-
welcome to Reactype!
50+
Welcome to Reactype!
5451
</Typography>
5552
{email ? (
5653
<Typography variant="body2">

‎app/src/components/left/Sidebar.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,16 @@ const Sidebar: React.FC<SidebarProps> = ({
2323
oldValue = newValue;
2424
};
2525

26-
const handleTabClick = (event: React.MouseEvent, oldValue: number) => {
27-
if (activeTab === oldValue) {
28-
setActiveTab(null);
29-
toggleVisibility(false);
30-
}
31-
};
26+
//the following allows users to click on the left panel to expand and collapse.
27+
// We decided to freeze so we've commented this and line 41 out
28+
29+
30+
// const handleTabClick = (event: React.MouseEvent, oldValue: number) => {
31+
// if (activeTab === oldValue) {
32+
// setActiveTab(null);
33+
// // toggleVisibility(false);
34+
// }
35+
// };
3236

3337
return (
3438
<Tabs
@@ -37,7 +41,7 @@ const Sidebar: React.FC<SidebarProps> = ({
3741
variant="scrollable"
3842
value={activeTab}
3943
onChange={handleTabChange}
40-
onClick={(e: React.MouseEvent) => handleTabClick(e, oldValue)}
44+
// onClick={(e: React.MouseEvent) => handleTabClick(e, oldValue)}
4145
TabIndicatorProps={{
4246
style: {
4347
backgroundColor: '#4A4A4A'

‎app/src/components/main/Canvas.tsx

Lines changed: 65 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, DragItem } from '../../interfaces/Interfaces';
22
import { DropTargetMonitor, useDrop } from 'react-dnd';
3-
import React, { useEffect, useState } from 'react';
3+
import React, { useEffect, useState, forwardRef } from 'react';
44
import {
55
addChild,
66
changeFocus,
@@ -20,7 +20,11 @@ import { display } from 'html2canvas/dist/types/css/property-descriptors/display
2020
import { ZoomIn, ZoomOut } from '@mui/icons-material';
2121
import { Button } from '@mui/material';
2222

23-
const Canvas = (props: {}): JSX.Element => {
23+
interface CanvasProps {
24+
zoom: number;
25+
}
26+
27+
const Canvas = forwardRef<HTMLDivElement, CanvasProps>(({ zoom }, ref) => {
2428
const state = useSelector((store: RootState) => store.appState);
2529
const contextParam = useSelector((store: RootState) => store.contextSlice);
2630
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
@@ -30,8 +34,6 @@ const Canvas = (props: {}): JSX.Element => {
3034
//remote cursor data
3135
const [remoteCursors, setRemoteCursors] = useState([]);
3236

33-
34-
3537
// Toggle switch for live cursor tracking
3638
const [toggleSwitch, setToggleSwitch] = useState(true);
3739

@@ -289,7 +291,9 @@ const Canvas = (props: {}): JSX.Element => {
289291
backgroundColor: isOver ? '#242323' : '#191919',
290292
// borderStyle: isOver ? 'dotted' : 'solid',
291293
aspectRatio: 'auto 774 / 1200',
292-
boxSizing: 'border-box'
294+
boxSizing: 'border-box',
295+
transform: `scale(${zoom})`,
296+
transformOrigin: 'top center'
293297
};
294298

295299
// Combine the default styles of the canvas with the custom styles set by the user for that component
@@ -311,24 +315,14 @@ const Canvas = (props: {}): JSX.Element => {
311315
'#9267FF'
312316
];
313317

314-
const [zoom, setZoom] = useState(1);
315-
316-
// zoom in
317-
const zoomIn = () => {
318-
setZoom(zoom + 0.1);
319-
};
320-
321-
// zoom out
322-
const zoomOut = () => {
323-
setZoom(Math.max(zoom - 0.1, 0.1));
324-
};
325-
326318
const zoomedChildren: React.CSSProperties = {
327319
transform: `scale(${zoom})`,
320+
width: '100%',
328321
transformOrigin: 'top center',
329322
display: 'flex',
330323
flexDirection: 'column',
331-
alignItems: 'center'
324+
alignItems: 'center',
325+
overflow: 'auto'
332326
};
333327

334328
const buttonStyle: React.CSSProperties = {
@@ -341,84 +335,63 @@ const Canvas = (props: {}): JSX.Element => {
341335
};
342336

343337
return (
344-
<div>
345-
<div
346-
style={{
347-
position: 'relative',
348-
bottom: 0,
349-
left: 0,
350-
display: 'flex',
351-
352-
marginRight: 'auto'
353-
}}
354-
>
355-
<Button style={buttonStyle} onClick={zoomIn}>
356-
<ZoomIn />
357-
</Button>
358-
<Button style={buttonStyle} onClick={zoomOut}>
359-
<ZoomOut />
360-
</Button>
361-
</div>
362-
<div
363-
className={'componentContainer'}
364-
ref={drop}
365-
data-testid="drop"
366-
style={canvasStyle}
367-
onClick={onClickHandler}
368-
onMouseMove={handleMouseMove}
369-
>
370-
<div className="allElements" style={zoomedChildren}>
371-
{renderChildren(currentComponent.children)}
372-
</div>
373-
{remoteCursors.map(
374-
(cursor, idx) =>
375-
cursor.isVisible && (
376-
<div
377-
key={idx}
378-
className="remote-cursor"
379-
style={{
380-
position: 'absolute',
381-
left: cursor.x + 'px',
382-
top: cursor.y - 68 + 'px',
383-
//cursor style
384-
fontSize: '1em',
385-
color: userColors[userList.indexOf(cursor.remoteUserName)]
386-
}}
387-
>
388-
{<FaMousePointer />}
389-
{cursor.remoteUserName}
390-
</div>
391-
)
392-
)}
393-
<label className="switch">
394-
{userList.length > 1 && (
395-
<Button
396-
className="btn-toggle"
397-
onClick={multipleClicks}
338+
<div
339+
className={'componentContainer'}
340+
ref={drop}
341+
data-testid="drop"
342+
style={canvasStyle}
343+
onClick={onClickHandler}
344+
onMouseMove={handleMouseMove}
345+
>
346+
{renderChildren(currentComponent.children)}
347+
{remoteCursors.map(
348+
(cursor, idx) =>
349+
cursor.isVisible && (
350+
<div
351+
key={idx}
352+
className="remote-cursor"
398353
style={{
399-
position: 'fixed',
400-
width: '100px',
401-
height: '35px',
402-
bottom: '200px',
403-
right: '45vw',
404-
padding: '5px',
405-
textAlign: 'center',
406-
color: '#ffffff',
407-
backgroundColor: '#151515',
408-
zIndex: 0,
409-
border: '2px solid #354e9c',
410-
whiteSpace: 'nowrap',
411-
cursor: 'pointer',
412-
textTransform: 'none'
354+
position: 'absolute',
355+
left: cursor.x + 'px',
356+
top: cursor.y - 68 + 'px',
357+
//cursor style
358+
fontSize: '1em',
359+
color: userColors[userList.indexOf(cursor.remoteUserName)]
413360
}}
414361
>
415-
{toggleText === 'on' ? 'View Cursors' : 'Hide Cursors'}
416-
</Button>
417-
)}
418-
</label>
419-
</div>
362+
{<FaMousePointer />}
363+
{cursor.remoteUserName}
364+
</div>
365+
)
366+
)}
367+
<label className="switch">
368+
{userList.length > 1 && (
369+
<Button
370+
className="btn-toggle"
371+
onClick={multipleClicks}
372+
style={{
373+
position: 'fixed',
374+
width: '100px',
375+
height: '35px',
376+
bottom: '200px',
377+
right: '45vw',
378+
padding: '5px',
379+
textAlign: 'center',
380+
color: '#ffffff',
381+
backgroundColor: '#151515',
382+
zIndex: 0,
383+
border: '2px solid #354e9c',
384+
whiteSpace: 'nowrap',
385+
cursor: 'pointer',
386+
textTransform: 'none'
387+
}}
388+
>
389+
{toggleText === 'on' ? 'View Cursors' : 'Hide Cursors'}
390+
</Button>
391+
)}
392+
</label>
420393
</div>
421394
);
422-
};
395+
});
423396

424397
export default Canvas;

0 commit comments

Comments
 (0)