whiteboard: select font size

Author: williamstein

src/packages/frontend/frame-editors/whiteboard-editor/elements/code.tsx

@@ -17,7 +17,17 @@ export default function Code({ element, focused }: Props) {
   if (!focused) {
     const val =
       "```py\n" + (element.str?.trim() ? element.str : "Type code") + "\n```";
-    return <Markdown value={val} style={{ width: "100%", height: "100%" }} />;
+    return (
+      <Markdown
+        value={val}
+        style={{
+          width: "100%",
+          height: "100%",
+          color: element.data?.color,
+          fontSize: element.data?.fontSize,
+        }}
+      />
+    );
   }
 
   useEffect(() => {

src/packages/frontend/frame-editors/whiteboard-editor/elements/note.tsx

@@ -13,7 +13,6 @@ export const STYLE = {
 };
 
 export default function Note({ element, focused }) {
-  console.log(element.data?.color, avatar_fontcolor(element.data?.color));
   // TODO: also use white color in some cases for text.
   const data = {
     ...element.data,
@@ -23,7 +22,6 @@ export default function Note({ element, focused }) {
     <div
       style={{
         ...STYLE,
-        fontSize: element.data?.fontSize,
         background: element.data?.color ?? DEFAULT_NOTE.color,
       }}
     >

src/packages/frontend/frame-editors/whiteboard-editor/elements/text.tsx

@@ -24,6 +24,7 @@ export default function Text({ element, focused }: Props) {
         value={element.str?.trim() ? element.str : "Type text"}
         style={{
           color: element.data?.color,
+          fontSize: element.data?.fontSize,
         }}
       />
     );
@@ -67,6 +68,7 @@ export default function Text({ element, focused }: Props) {
           file_path={path_split(frame.path).head}
           style={{
             color: element.data?.color,
+            fontSize: element.data?.fontSize,
           }}
           value={value?.trim() ? value : "Type text"}
         />

src/packages/frontend/frame-editors/whiteboard-editor/tools/defaults.ts

@@ -0,0 +1,4 @@
+export const DEFAULT_FONT_SIZE = 14;
+
+export const minFontSize = 7;
+export const maxFontSize = 80;

src/packages/frontend/frame-editors/whiteboard-editor/tools/edit-bar.tsx

@@ -3,7 +3,7 @@ Editing bar for editing one (or more) selected elements.
 */
 
 import { useState } from "react";
-import { Tooltip, Button } from "antd";
+import { Button, InputNumber, Tooltip } from "antd";
 import { Element } from "../types";
 import { PANEL_STYLE } from "./panel";
 import { Icon } from "@cocalc/frontend/components/icon";
@@ -12,6 +12,8 @@ import { Actions } from "../actions";
 import { BrushPreview, maxRadius } from "./pen";
 import ColorPicker from "@cocalc/frontend/components/color-picker";
 
+import { DEFAULT_FONT_SIZE, minFontSize, maxFontSize } from "./defaults";
+
 interface Props {
   elements: Element[];
 }
@@ -31,6 +33,7 @@ export default function EditBar({ elements }: Props) {
       }}
     >
       <div style={{ display: "flex" }}>
+        <FontSize actions={actions} elements={elements} />
         <ColorButton actions={actions} elements={elements} />
         <DeleteButton actions={actions} elements={elements} />
       </div>
@@ -75,11 +78,7 @@ function ColorButton({ actions, elements }: ButtonProps) {
 
   function setColor(color: string) {
     setColor0(color);
-    for (const element of elements) {
-      const data = { ...element.data, color };
-      actions.setElement({ ...element, data }, false);
-    }
-    actions.syncstring_commit();
+    setDataField({ elements, actions }, { color });
   }
 
   return (
@@ -119,3 +118,52 @@ function getColor(elements: Element[]): string | undefined {
     }
   }
 }
+
+function FontSize({ actions, elements }: ButtonProps) {
+  return (
+    <Tooltip title="Font size in pixels">
+      <InputNumber
+        style={{
+          width: "64px",
+          fontSize: "20px",
+          color: "#666",
+          paddingTop: "4px",
+        }}
+        min={minFontSize}
+        max={maxFontSize}
+        defaultValue={getFontSize(elements)}
+        onChange={(fontSize) => {
+          setDataField({ elements, actions }, { fontSize });
+        }}
+      />
+    </Tooltip>
+  );
+}
+
+function getFontSize(elements: Element[]): number | undefined {
+  for (const element of elements) {
+    if (element.data?.fontSize) {
+      return element.data?.fontSize;
+    }
+  }
+  return DEFAULT_FONT_SIZE;
+}
+
+function setDataField(
+  {
+    elements,
+    actions,
+  }: {
+    elements: Element[];
+    actions: Actions;
+  },
+  obj: object
+) {
+  for (const element of elements) {
+    actions.setElement(
+      { ...element, data: { ...element.data, ...obj } },
+      false
+    );
+  }
+  actions.syncstring_commit();
+}

src/packages/frontend/frame-editors/whiteboard-editor/tools/note.tsx

@@ -10,9 +10,8 @@ import ColorPicker from "@cocalc/frontend/components/color-picker";
 import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 import { debounce } from "lodash";
 import { STYLE } from "../elements/note";
+import { DEFAULT_FONT_SIZE, minFontSize, maxFontSize } from "./defaults";
 
-const minFontSize = 7;
-const maxFontSize = 64;
 
 // see https://www.post-it.com/3M/en_US/post-it/ideas/color/
 export const COLORS = [
@@ -32,7 +31,7 @@ export const COLORS = [
   "#99b1f0",
 ];
 const numNoteTypes = COLORS.length;
-export const DEFAULT_NOTE = { fontSize: 14, color: COLORS[0] };
+export const DEFAULT_NOTE = { fontSize: DEFAULT_FONT_SIZE, color: COLORS[0] };
 
 export default function NoteToolPanel() {
   const frame = useFrameContext();

src/packages/frontend/frame-editors/whiteboard-editor/tools/upload.tsx

@@ -26,7 +26,6 @@ export default function Upload({ children, evtToDataRef }: Props) {
       // TOOD: this is the wrong location - should instead just let canvas save mouse location in a ref,
       // and don't involve Dropzone at all.
       const location = evtToDataRef.current?.(mouse) ?? { x: 0, y: 0 };
-      console.log("final location = ", location);
       let str: string;
       const filename = join(dest_path, file.name);
       if (file.type.indexOf("image") == -1) {