whiteboard: font family

Author: williamstein

src/packages/frontend/editors/editor-button-bar.ts

@@ -31,6 +31,7 @@ export const FONT_FACES = [
   "Courier",
   "Courier New",
   "Comic Sans MS",
+  "Cursive",
   "Georgia",
   "Helvetica",
   "Impact",

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

@@ -22,10 +22,7 @@ export default function Text({ element, focused }: Props) {
         project_id={frame.project_id}
         file_path={path_split(frame.path).head}
         value={element.str?.trim() ? element.str : "Type text"}
-        style={{
-          color: element.data?.color,
-          fontSize: element.data?.fontSize,
-        }}
+        style={getStyle(element)}
       />
     );
   }
@@ -66,13 +63,18 @@ export default function Text({ element, focused }: Props) {
         <Markdown
           project_id={frame.project_id}
           file_path={path_split(frame.path).head}
-          style={{
-            color: element.data?.color,
-            fontSize: element.data?.fontSize,
-          }}
+          style={getStyle(element)}
           value={value?.trim() ? value : "Type text"}
         />
       </Popover>
     </div>
   );
 }
+
+function getStyle(element) {
+  return {
+    color: element.data?.color,
+    fontSize: element.data?.fontSize,
+    fontFamily: element.data?.fontFamily,
+  };
+}

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

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

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

@@ -2,17 +2,24 @@
 Editing bar for editing one (or more) selected elements.
 */
 
-import { useState } from "react";
-import { Button, InputNumber, Tooltip } from "antd";
+import { CSSProperties, ReactNode, useState } from "react";
+import { Button, InputNumber, Select, Tooltip } from "antd";
+const { Option } = Select;
 import { Element } from "../types";
 import { PANEL_STYLE } from "./panel";
 import { Icon } from "@cocalc/frontend/components/icon";
 import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 import { Actions } from "../actions";
 import { BrushPreview, maxRadius } from "./pen";
 import ColorPicker from "@cocalc/frontend/components/color-picker";
+import { FONT_FACES as FONT_FAMILIES } from "@cocalc/frontend/editors/editor-button-bar";
 
-import { DEFAULT_FONT_SIZE, minFontSize, maxFontSize } from "./defaults";
+import {
+  DEFAULT_FONT_SIZE,
+  DEFAULT_FONT_FAMILY,
+  minFontSize,
+  maxFontSize,
+} from "./defaults";
 
 interface Props {
   elements: Element[];
@@ -33,6 +40,7 @@ export default function EditBar({ elements }: Props) {
       }}
     >
       <div style={{ display: "flex" }}>
+        <FontFamily actions={actions} elements={elements} />
         <FontSize actions={actions} elements={elements} />
         <ColorButton actions={actions} elements={elements} />
         <DeleteButton actions={actions} elements={elements} />
@@ -57,7 +65,7 @@ function DeleteButton({ actions, elements }: ButtonProps) {
   return (
     <Tooltip title="Delete">
       <Button
-        style={BUTTON_STYLE}
+        style={{ ...BUTTON_STYLE, borderLeft: "1px solid #ccc" }}
         type="text"
         onClick={() => {
           for (const { id } of elements) {
@@ -149,6 +157,73 @@ function getFontSize(elements: Element[]): number | undefined {
   return DEFAULT_FONT_SIZE;
 }
 
+function FontFamily({ actions, elements }: ButtonProps) {
+  return (
+    <SelectFontFamily
+      onChange={(fontFamily) => {
+        setDataField({ elements, actions }, { fontFamily });
+      }}
+      defaultValue={getFontFamily(elements)}
+      size="large"
+      style={{ marginTop: "1px", minWidth: "100px" }}
+    />
+  );
+}
+
+export function SelectFontFamily({
+  onChange,
+  defaultValue,
+  size,
+  style,
+}: {
+  onChange?: (fontFamily: string) => void;
+  defaultValue?: string;
+  size?: any;
+  style?: CSSProperties;
+}) {
+  const v: ReactNode[] = [];
+  for (const fontFamily of FONT_FAMILIES) {
+    v.push(
+      <Option
+        value={fontFamily}
+        key={fontFamily}
+        search={fontFamily.toLowerCase()}
+      >
+        <span style={{ fontFamily }}>{fontFamily}</span>
+      </Option>
+    );
+  }
+
+  return (
+    <Tooltip title="Select a font">
+      <Select
+        style={style}
+        size={size}
+        defaultValue={defaultValue}
+        showSearch
+        placeholder="Select a font"
+        optionFilterProp="children"
+        onChange={onChange}
+        filterOption={(input, option) => {
+          if (!input.trim()) return true;
+          return option?.search.includes(input.toLowerCase());
+        }}
+      >
+        {v}
+      </Select>
+    </Tooltip>
+  );
+}
+
+function getFontFamily(elements: Element[]): string | undefined {
+  for (const element of elements) {
+    if (element.data?.fontFamily) {
+      return element.data?.fontFamily;
+    }
+  }
+  return DEFAULT_FONT_FAMILY;
+}
+
 function setDataField(
   {
     elements,

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

@@ -11,7 +11,8 @@ import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame
 import { debounce } from "lodash";
 import { STYLE } from "../elements/note";
 import { DEFAULT_FONT_SIZE, minFontSize, maxFontSize } from "./defaults";
-
+import { SelectFontFamily } from "./edit-bar";
+import { avatar_fontcolor } from "@cocalc/frontend/account/avatar/font-color";
 
 // see https://www.post-it.com/3M/en_US/post-it/ideas/color/
 export const COLORS = [
@@ -47,7 +48,7 @@ export default function NoteToolPanel() {
   }
 
   function NoteButton({ id }) {
-    const { fontSize, color } = presets[id] ?? DEFAULT_NOTE;
+    const { fontSize, color, fontFamily } = presets[id] ?? DEFAULT_NOTE;
     return (
       <Button
         style={{ padding: "5px", height: "35px" }}
@@ -65,6 +66,7 @@ export default function NoteToolPanel() {
       >
         <NotePreview
           fontSize={fontSize}
+          fontFamily={fontFamily}
           color={color}
           borderColor={id == selected ? "blue" : "#ccc"}
         />
@@ -77,7 +79,7 @@ export default function NoteToolPanel() {
     notePresets.push(<NoteButton key={id} id={id} />);
   }
 
-  const { fontSize, color } = presets[selected] ?? DEFAULT_NOTE;
+  const { fontSize, color, fontFamily } = presets[selected] ?? DEFAULT_NOTE;
 
   return (
     <div
@@ -107,6 +109,7 @@ export default function NoteToolPanel() {
         <NoteParams
           color={color}
           fontSize={fontSize}
+          fontFamily={fontFamily}
           setColor={(color) => {
             setPresets({
               ...presets,
@@ -119,6 +122,12 @@ export default function NoteToolPanel() {
               [selected]: { ...presets[selected], fontSize },
             });
           }}
+          setFontFamily={(fontFamily) => {
+            setPresets({
+              ...presets,
+              [selected]: { ...presets[selected], fontFamily },
+            });
+          }}
         />
       )}
     </div>
@@ -127,15 +136,22 @@ export default function NoteToolPanel() {
 
 function NotePreview({
   fontSize,
+  fontFamily,
   color,
   borderColor,
 }: {
   fontSize: number;
+  fontFamily?: string;
   color: string;
   borderColor?: string;
 }) {
   return (
-    <Tooltip title={`Font size: ${fontSize}px`}>
+    <Tooltip
+      title={
+        `Font size: ${fontSize}px` +
+        (fontFamily ? `, Font family: ${fontFamily}` : "")
+      }
+    >
       <div
         style={{
           ...STYLE,
@@ -145,15 +161,25 @@ function NotePreview({
           border: `2px solid ${borderColor ?? "#ccc"}`,
           width: "50px",
           height: "25px",
-          fontSize: "8pt",
-          color: "#888",
+          fontSize: "14px",
+          fontFamily,
+          color: avatar_fontcolor(color),
         }}
-      ></div>
+      >
+        A
+      </div>
     </Tooltip>
   );
 }
 
-function NoteParams({ color, fontSize, setColor, setFontSize }) {
+function NoteParams({
+  color,
+  fontSize,
+  fontFamily,
+  setColor,
+  setFontSize,
+  setFontFamily,
+}) {
   return (
     <div
       style={{
@@ -178,6 +204,17 @@ function NoteParams({ color, fontSize, setColor, setFontSize }) {
           Font size (px)
         </div>
       </div>
+      <div style={{ width: "100%", display: "flex", marginBottom: "10px" }}>
+        <SelectFontFamily
+          onChange={setFontFamily}
+          defaultValue={fontFamily}
+          size="small"
+          style={{ width: "70%", flex: 1 }}
+        />
+        <div style={{ marginLeft: "5px", fontSize: "9pt", paddingTop: "6px" }}>
+          Font family
+        </div>
+      </div>
       <ColorPicker color={color} onChange={setColor} defaultPicker="swatches" />
     </div>
   );
@@ -204,7 +241,9 @@ export function ResetButton({ onClick }) {
 // For now just storing these presets in localStorage.
 // TODO: move to account settings or the document.  NOT SURE?!
 // Same problem with pen params.
-type Presets = { [id: string]: { color: string; fontSize: number } };
+type Presets = {
+  [id: string]: { color: string; fontSize: number; fontFamily?: string };
+};
 
 const key = "whiteboard-note-presets";