Skip to content

Commit 9525b90

Browse files
cyburnscyburns
authored
Merge branch 'dev' into cyrus-collab-room
2 parents fbc8250 + 1133f12 commit 9525b90

File tree

11 files changed

+184
-149
lines changed

11 files changed

+184
-149
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 & 90 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);
@@ -287,7 +291,9 @@ const Canvas = (props: {}): JSX.Element => {
287291
backgroundColor: isOver ? '#242323' : '#191919',
288292
// borderStyle: isOver ? 'dotted' : 'solid',
289293
aspectRatio: 'auto 774 / 1200',
290-
boxSizing: 'border-box'
294+
boxSizing: 'border-box',
295+
transform: `scale(${zoom})`,
296+
transformOrigin: 'top center'
291297
};
292298

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

312-
const [zoom, setZoom] = useState(1);
313-
314-
// zoom in
315-
const zoomIn = () => {
316-
setZoom(zoom + 0.1);
317-
};
318-
319-
// zoom out
320-
const zoomOut = () => {
321-
setZoom(Math.max(zoom - 0.1, 0.1));
322-
};
323-
324318
const zoomedChildren: React.CSSProperties = {
325319
transform: `scale(${zoom})`,
320+
width: '100%',
326321
transformOrigin: 'top center',
327322
display: 'flex',
328323
flexDirection: 'column',
329-
alignItems: 'center'
324+
alignItems: 'center',
325+
overflow: 'auto'
330326
};
331327

332328
const buttonStyle: React.CSSProperties = {
@@ -339,84 +335,63 @@ const Canvas = (props: {}): JSX.Element => {
339335
};
340336

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

422397
export default Canvas;

0 commit comments

Comments
 (0)