Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FAB-126] Tool improvements #58

Merged
merged 9 commits into from
Oct 7, 2021
Merged

[FAB-126] Tool improvements #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1442f85
refactor: fixed brush size consistency
daystram Oct 5, 2021
7862af1
refactor: improved cursor legibility
daystram Oct 5, 2021
ab9bd4d
feat: added colors
daystram Oct 5, 2021
8b21319
refactor: fixed text size consistency
daystram Oct 5, 2021
ae167fe
refactor: updated brush size selection
daystram Oct 6, 2021
933e75c
refactor: updated tooltips
daystram Oct 6, 2021
6a66360
chore: removed deebugging borders
daystram Oct 6, 2021
a67b2b9
refactor: updated snackbar style
daystram Oct 6, 2021
57fd318
refactor: improved button access
daystram Oct 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion fableous-fe/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ const useStyles = makeStyles({
backgroundAttachment: "fixed",
minHeight: "100vh",
},
snackbarChildren: {
borderRadius: 24,
},
});

export default function App() {
Expand Down Expand Up @@ -133,7 +136,15 @@ export default function App() {
<div id="app" className={classes.app}>
<div className="flex flex-col min-h-screen">
{/* place Snackbar outside of React.StrictMode to suppress finddomnode is deprecated warning */}
<SnackbarProvider maxSnack={3}>
<SnackbarProvider
maxSnack={3}
classes={{
variantSuccess: classes.snackbarChildren,
variantInfo: classes.snackbarChildren,
variantWarning: classes.snackbarChildren,
variantError: classes.snackbarChildren,
}}
>
<React.StrictMode>
<AuthProvider>
<Router>
Expand Down
2 changes: 1 addition & 1 deletion fableous-fe/src/components/canvas/BrushWidthIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function BrushWidthIcon(props: BrushWidthIconProps) {
stroke={stroke}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={strokeWidth}
strokeWidth={strokeWidth / 2 + 1}
/>
</svg>
</SvgIcon>
Expand Down
51 changes: 26 additions & 25 deletions fableous-fe/src/components/canvas/Canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,13 @@ import {
scaleUpXY,
translateXY,
} from "./helpers";
import { SCALE, SELECT_PADDING } from "./constants";
import {
BRUSH_WIDTHS,
SCALE,
SELECT_PADDING,
TEXT_COLOR,
TEXT_FONTSIZE,
} from "./constants";
import { Cursor } from "./CursorScreen";
import { restAPI } from "../../api";
import { ToolMode } from "../../constant";
Expand Down Expand Up @@ -53,7 +59,7 @@ interface CanvasProps {
toolMode?: ToolMode;
setToolMode?: React.Dispatch<React.SetStateAction<ToolMode>>;
toolColor?: string;
toolWidth?: number;
toolNormWidth?: number;
rootId?: string | undefined;
}

Expand All @@ -65,7 +71,7 @@ const defaultProps = {
toolColor: "#000000ff",
toolMode: ToolMode.None,
setToolMode: () => {},
toolWidth: 8 * SCALE,
toolNormWidth: BRUSH_WIDTHS[1],
rootId: undefined,
};

Expand Down Expand Up @@ -96,7 +102,7 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
toolMode = defaultProps.toolMode,
setToolMode = defaultProps.setToolMode,
toolColor = defaultProps.toolColor,
toolWidth = defaultProps.toolWidth,
toolNormWidth = defaultProps.toolNormWidth,
wsConn,
rootId,
} = props;
Expand Down Expand Up @@ -138,12 +144,13 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
x2: number,
y2: number,
targetColor: string,
targetWidth: number
targetNormwidth: number
) => {
const ctx = canvasRef.current.getContext(
"2d"
) as CanvasRenderingContext2D;
const isCoordEq = x1 === x2 && y1 === y2;
const [targetWidth] = scaleUpXY(canvasRef, targetNormwidth, 0);
// lay down path
ctx.beginPath();
ctx.moveTo(x1, y1);
Expand All @@ -167,7 +174,6 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
if (role !== pb.ControllerRole.HUB) {
const [normX1, normY1] = scaleDownXY(canvasRef, x1, y1);
const [normX2, normY2] = scaleDownXY(canvasRef, x2, y2);
const [normWidth] = scaleDownXY(canvasRef, targetWidth, 0);
wsConn?.send(
pb.WSMessage.encode({
role,
Expand All @@ -178,7 +184,7 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
x2: normX2,
y2: normY2,
color: targetColor,
width: normWidth,
width: targetNormwidth,
},
timestamp:
process.env.NODE_ENV === "development" ? Date.now() : undefined,
Expand Down Expand Up @@ -319,7 +325,7 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
shape.text,
fontSize
);
ctx.fillStyle = isGallery ? "#00000000" : "#000000";
ctx.fillStyle = isGallery ? "#00000000" : TEXT_COLOR;
ctx.font = `${fontSize * SCALE}px Comic Sans MS`;
ctx.fillText(shape.text, x, y);
if (parseInt(id, 10) === editingTextIdRef.current) {
Expand Down Expand Up @@ -415,11 +421,10 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
showKeyboard(false);
} else {
// insert new text
const [normFontSize] = scaleDownXY(canvasRef, 18, 0);
placeText(textId, {
normX: normCursorX,
normY: normCursorY,
normFontSize,
normFontSize: TEXT_FONTSIZE,
text: "",
} as TextShape);
setEditingTextId(textId);
Expand Down Expand Up @@ -574,14 +579,14 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
normX: number,
normY: number,
normWidth: number,
targetMode: ToolMode
targetToolMode: ToolMode
) => {
if (setCursor)
setCursor({
normX,
normY,
normWidth,
toolMode: targetMode,
toolMode: targetToolMode,
} as Cursor);
if (role !== pb.ControllerRole.HUB) {
wsConn?.send(
Expand All @@ -592,7 +597,7 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
x1: normX,
y1: normY,
width: normWidth,
text: targetMode,
text: targetToolMode,
},
}).finish()
);
Expand All @@ -615,7 +620,6 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
msg.paint?.x2 || 0,
msg.paint?.y2 || 0
);
const [width] = scaleUpXY(canvasRef, msg.paint?.width || 0, 0);
switch (msg.type) {
case pb.WSMessageType.PAINT:
placePaint(
Expand All @@ -624,7 +628,7 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
x2,
y2,
msg.paint?.color || "#000000ff",
width || 8
msg.paint?.width || 0
);
if (process.env.NODE_ENV === "development")
console.log(
Expand Down Expand Up @@ -679,13 +683,12 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
const onPointerDown = (event: SimplePointerEventData) => {
const [x, y] = translateXY(canvasRef, event.clientX, event.clientY);
const [normX, normY] = scaleDownXY(canvasRef, x, y);
const [normWidth] = scaleDownXY(canvasRef, toolWidth, 0);
placeCursor(normX, normY, normWidth, toolMode);
placeCursor(normX, normY, toolNormWidth, toolMode);
onDraw();
switch (toolMode) {
case ToolMode.Paint:
setDragging(true);
placePaint(x, y, x, y, toolColor, toolWidth);
placePaint(x, y, x, y, toolColor, toolNormWidth);
setLastPos([x, y]);
break;
case ToolMode.Fill:
Expand All @@ -706,8 +709,7 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
const [lastX, lastY] = lastPos;
const [x, y] = translateXY(canvasRef, event.clientX, event.clientY);
const [normX, normY] = scaleDownXY(canvasRef, x, y);
const [normWidth] = scaleDownXY(canvasRef, toolWidth, 0);
if (allowDrawing) placeCursor(normX, normY, normWidth, toolMode);
if (allowDrawing) placeCursor(normX, normY, toolNormWidth, toolMode);
switch (toolMode) {
case ToolMode.Paint:
if (!dragging || !allowDrawing) return;
Expand All @@ -716,13 +718,13 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
Math.round(lastY) === Math.round(y)
)
return;
placePaint(lastX, lastY, x, y, toolColor, toolWidth);
placePaint(lastX, lastY, x, y, toolColor, toolNormWidth);
break;
case ToolMode.Text:
if (!editingTextId || hasLifted || !allowDrawing) return;
const shape = textShapesRef.current[editingTextId];
setDragging(true);
showKeyboard(false);
const shape = textShapesRef.current[editingTextId];
placeText(editingTextId, {
...shape,
normX: normX + dragOffset[0],
Expand All @@ -744,10 +746,9 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
switch (toolMode) {
case ToolMode.Paint:
if (dragging) {
placePaint(lastX, lastY, x, y, toolColor, toolWidth);
placePaint(lastX, lastY, x, y, toolColor, toolNormWidth);
const [normX, normY] = scaleDownXY(canvasRef, x, y);
const [normWidth] = scaleDownXY(canvasRef, toolWidth, 0);
placeCursor(normX, normY, normWidth, toolMode);
placeCursor(normX, normY, toolNormWidth, toolMode);
placeCheckpoint(toolMode);
}
break;
Expand Down
74 changes: 41 additions & 33 deletions fableous-fe/src/components/canvas/CanvasToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import PaletteIcon from "@material-ui/icons/Palette";
import UndoIcon from "@material-ui/icons/Undo";
import BrushIcon from "@material-ui/icons/Brush";
import StopIcon from "@material-ui/icons/Stop";
import StopRoundedIcon from "@material-ui/icons/StopRounded";
import FormatColorFillIcon from "@material-ui/icons/FormatColorFill";
import { Button, IconButton, makeStyles, Typography } from "@material-ui/core";
import EraserIcon from "./EraserIcon";
Expand All @@ -15,6 +16,8 @@ import { proto as pb } from "../../proto/message_pb";
import BrushWidthIcon from "./BrushWidthIcon";
import CanvasToolbarTooltip from "./CanvasToolbarTooltip";
import { TutorialTargetId } from "../../tutorialTargetIds";
import { BRUSH_COLORS, BRUSH_WIDTHS } from "./constants";
import { colors } from "../../colors";

interface CanvasToolbarProps {
role: pb.ControllerRole;
Expand All @@ -23,21 +26,12 @@ interface CanvasToolbarProps {
setToolMode: React.Dispatch<React.SetStateAction<ToolMode>>;
toolColor: string;
setToolColor: React.Dispatch<React.SetStateAction<string>>;
toolWidth: number;
setToolWidth: React.Dispatch<React.SetStateAction<number>>;
toolNormWidth: number;
setToolNormWidth: React.Dispatch<React.SetStateAction<number>>;
}

const COLORS = [
"#000000ff", // black
"#ff0000ff", // red
"#ffff00ff", // yellow
"#00ff00ff", // green
"#00ffffff", // cyan
"#0000ffff", // blue
];
const ERASE_COLOR = "#00000000";
const BRUSH_WIDTHS = [4, 8, 12, 16, 20];
const ICON_STROKE_WIDTH_RATIO = 1 / 4;
const ICON_STROKE_WIDTH_RATIO = 128;

const useStyles = makeStyles({
hideScrollbar: {
Expand All @@ -61,8 +55,8 @@ const CanvasToolbar = forwardRef<ImperativeCanvasRef, CanvasToolbarProps>(
setToolMode,
toolColor,
setToolColor,
toolWidth,
setToolWidth,
toolNormWidth,
setToolNormWidth,
offsetHeight,
} = props;
const imperativeCanvasRef = ref as MutableRefObject<ImperativeCanvasRef>;
Expand Down Expand Up @@ -125,10 +119,17 @@ const CanvasToolbar = forwardRef<ImperativeCanvasRef, CanvasToolbarProps>(
{BRUSH_WIDTHS.map((brushWidth) => (
<IconButton
onClick={() => {
setToolWidth(brushWidth);
setToolNormWidth(brushWidth);
setIsWidthPickerOpen(false);
}}
color="primary"
color="secondary"
style={{
border: `2px solid ${
toolNormWidth === brushWidth
? colors.orange.main
: "#0000"
}`,
}}
key={brushWidth}
>
<BrushWidthIcon
Expand Down Expand Up @@ -165,7 +166,7 @@ const CanvasToolbar = forwardRef<ImperativeCanvasRef, CanvasToolbarProps>(
? "secondary"
: "primary"
}
strokeWidth={toolWidth * ICON_STROKE_WIDTH_RATIO}
strokeWidth={toolNormWidth * ICON_STROKE_WIDTH_RATIO}
/>
</IconButton>
</CanvasToolbarTooltip>
Expand Down Expand Up @@ -205,7 +206,7 @@ const CanvasToolbar = forwardRef<ImperativeCanvasRef, CanvasToolbarProps>(
display: "flex",
}}
>
{COLORS.map((color) => (
{BRUSH_COLORS.map((color) => (
<Button
component="div"
onClick={() => {
Expand All @@ -214,12 +215,15 @@ const CanvasToolbar = forwardRef<ImperativeCanvasRef, CanvasToolbarProps>(
}}
style={{
backgroundColor: color,
width: "50px",
height: "50px",
width: "38px",
height: "38px",
padding: 0,
marginLeft: "0.5rem",
margin: 4,
minWidth: "auto",
borderRadius: 0,
borderRadius: 4,
border: `2px solid ${
toolColor === color ? colors.orange.main : "#0000"
}`,
}}
key={color}
/>
Expand All @@ -234,7 +238,7 @@ const CanvasToolbar = forwardRef<ImperativeCanvasRef, CanvasToolbarProps>(
className="relative"
>
<PaletteIcon fontSize="large" />
<StopIcon
<StopRoundedIcon
style={{
color:
toolColor === ERASE_COLOR ? prevColor : toolColor,
Expand All @@ -255,15 +259,7 @@ const CanvasToolbar = forwardRef<ImperativeCanvasRef, CanvasToolbarProps>(
>
<TextFieldsIcon fontSize="large" />
</IconButton>
<CanvasToolbarTooltip
isOpen={isRecordingAudio}
setIsOpen={setIsRecordingAudio}
tooltipTitle={
<Typography variant="body1">
{showMmSsFromSeconds(recordingTimeElapsed)}
</Typography>
}
>
<div className="flex flex-col justify-center items-center relative">
<IconButton
id={TutorialTargetId.AudioTool}
onClick={() => {
Expand All @@ -285,7 +281,19 @@ const CanvasToolbar = forwardRef<ImperativeCanvasRef, CanvasToolbarProps>(
<MicIcon fontSize="large" />
)}
</IconButton>
</CanvasToolbarTooltip>
{isRecordingAudio && (
<Typography
variant="subtitle2"
className="font-bold absolute pointer-events-none"
style={{
color: colors.orange.main,
bottom: -4,
}}
>
{showMmSsFromSeconds(recordingTimeElapsed)}
</Typography>
)}
</div>
</>
)}
<IconButton
Expand Down
Loading