board: implement a stopwatch

Author: williamstein

src/packages/frontend/editors/stopwatch/stopwatch.tsx

@@ -7,7 +7,8 @@
 The stopwatch component
 */
 
-import { Button, Row, Col } from "antd";
+import { CSSProperties } from "react";
+import { Button, Row, Col, Tooltip } from "antd";
 import {
   DeleteTwoTone,
   PauseCircleTwoTone,
@@ -27,10 +28,15 @@ interface StopwatchProps {
   state: TimerState; // 'paused' or 'running' or 'stopped'
   time: number; // when entered this state
   click_button: (str: string) => void;
-  set_label: (str: string) => void;
+  set_label?: (str: string) => void;
   compact?: boolean;
   label?: string; // a text label
+  noLabel?: boolean; // show no label at all
+  noDelete?: boolean; // do not show delete button
+  noButtons?: boolean; // hide ALL buttons
   total?: number; // total time accumulated before entering current state
+  style?: CSSProperties;
+  timeStyle?: CSSProperties;
 }
 
 interface StopwatchState {
@@ -59,51 +65,56 @@ export class Stopwatch extends Component<StopwatchProps, StopwatchState> {
 
   private render_start_button(): Rendered {
     return (
-      <Button
-        icon={<PlayCircleTwoTone />}
-        onClick={() => this.props.click_button("start")}
-        style={!this.props.compact ? { width: "8em" } : undefined}
-        size={this.props.compact ? "small" : undefined}
-      >
-        {!this.props.compact ? "Start" : undefined}
-      </Button>
+      <Tooltip title="Start the stopwatch">
+        <Button
+          icon={<PlayCircleTwoTone />}
+          onClick={() => this.props.click_button("start")}
+          style={!this.props.compact ? { width: "8em" } : undefined}
+        >
+          {!this.props.compact ? "Start" : undefined}
+        </Button>
+      </Tooltip>
     );
   }
 
   private render_reset_button(): Rendered {
     return (
-      <Button
-        icon={<StopTwoTone />}
-        onClick={() => this.props.click_button("reset")}
-        size={this.props.compact ? "small" : undefined}
-      >
-        {!this.props.compact ? "Reset" : undefined}
-      </Button>
+      <Tooltip title="Reset the stopwatch to 0">
+        <Button
+          icon={<StopTwoTone />}
+          onClick={() => this.props.click_button("reset")}
+        >
+          {!this.props.compact ? "Reset" : undefined}
+        </Button>
+      </Tooltip>
     );
   }
 
   private render_delete_button(): Rendered {
-    if (this.props.compact) return;
+    if (this.props.compact || this.props.noDelete) return;
     return (
-      <Button
-        icon={<DeleteTwoTone />}
-        onClick={() => this.props.click_button("delete")}
-      >
-        {!this.props.compact ? "Delete" : undefined}
-      </Button>
+      <Tooltip title="Delete this stopwatch">
+        <Button
+          icon={<DeleteTwoTone />}
+          onClick={() => this.props.click_button("delete")}
+        >
+          {!this.props.compact ? "Delete" : undefined}
+        </Button>
+      </Tooltip>
     );
   }
 
   private render_pause_button(): Rendered {
     return (
-      <Button
-        icon={<PauseCircleTwoTone />}
-        onClick={() => this.props.click_button("pause")}
-        style={!this.props.compact ? { width: "8em" } : undefined}
-        size={this.props.compact ? "small" : undefined}
-      >
-        {!this.props.compact ? "Pause" : undefined}
-      </Button>
+      <Tooltip title="Pause the stopwatch">
+        <Button
+          icon={<PauseCircleTwoTone />}
+          onClick={() => this.props.click_button("pause")}
+          style={!this.props.compact ? { width: "8em" } : undefined}
+        >
+          {!this.props.compact ? "Pause" : undefined}
+        </Button>
+      </Tooltip>
     );
   }
 
@@ -125,7 +136,12 @@ export class Stopwatch extends Component<StopwatchProps, StopwatchState> {
     }
 
     return (
-      <TimeAmount key={"time"} amount={amount} compact={this.props.compact} />
+      <TimeAmount
+        key={"time"}
+        amount={amount}
+        compact={this.props.compact}
+        style={this.props.timeStyle}
+      />
     );
   }
 
@@ -168,7 +184,7 @@ export class Stopwatch extends Component<StopwatchProps, StopwatchState> {
         <TextInput
           text={this.props.label ? this.props.label : ""}
           on_change={(value) => {
-            this.props.set_label(value);
+            this.props.set_label?.(value);
             this.setState({ editing_label: false });
           }}
           autoFocus={true}
@@ -210,6 +226,21 @@ export class Stopwatch extends Component<StopwatchProps, StopwatchState> {
   }
 
   private render_full_size(): Rendered {
+    if (this.props.noLabel) {
+      return (
+        <div
+          style={{
+            borderBottom: "1px solid #666",
+            background: "#efefef",
+            padding: "15px",
+            ...this.props.style,
+          }}
+        >
+          <div>{this.render_time()}</div>
+          <div>{this.render_buttons()}</div>
+        </div>
+      );
+    }
     return (
       <div
         style={{
@@ -226,18 +257,25 @@ export class Stopwatch extends Component<StopwatchProps, StopwatchState> {
             {this.render_label()}
           </Col>
         </Row>
-        <Row>
-          <Col md={24}>{this.render_buttons()}</Col>
-        </Row>
+        {!this.props.noButtons && (
+          <Row>
+            <Col md={24}>{this.render_buttons()}</Col>
+          </Row>
+        )}
       </div>
     );
   }
 
   public render(): Rendered {
     if (this.props.compact) {
       return (
-        <div>
-          {this.render_time()} {this.render_buttons()}
+        <div style={{ display: "flex" }}>
+          {this.render_time()}
+          {!this.props.noButtons && (
+            <div style={{ marginTop: "3px", marginLeft: "5px" }}>
+              {this.render_buttons()}
+            </div>
+          )}
         </div>
       );
     } else {
@@ -257,6 +295,7 @@ const zpad = function (n) {
 interface TimeProps {
   amount: number;
   compact?: boolean;
+  style?: CSSProperties;
 }
 
 //const TimeAmount = function(props: TimeProps) {
@@ -272,6 +311,7 @@ function TimeAmount(props: TimeProps) {
       style={{
         fontSize: !props.compact ? "50pt" : undefined,
         fontFamily: "courier",
+        ...props.style,
       }}
     >
       {zpad(hours)}:{zpad(minutes)}:{zpad(seconds)}

src/packages/frontend/frame-editors/whiteboard-editor/canvas.tsx

@@ -368,31 +368,34 @@ export default function Canvas({
       } else {
         // clicked on an element on the canvas; either stay selected or let
         // it handle selecting it.
-        return;
       }
+      return;
     }
-    const data = evtToData(e);
+    const data = { ...evtToData(e), z: transforms.zMax + 1 };
     let params: any = undefined;
 
     if (selectedTool == "note") {
       params = { data: getNoteParams() };
+    } else if (selectedTool == "stopwatch") {
+      params = { data: { fontSize: 24 } };
     }
 
-    // this code needs to move to tool panel spec stuff...
+    const element = {
+      ...data,
+      type: selectedTool,
+      ...params,
+    };
+
+    // create element
+    const { id } = frame.actions.createElement(element, true);
+
+    // in some cases, select it
     if (
       selectedTool == "text" ||
       selectedTool == "note" ||
-      selectedTool == "code"
+      selectedTool == "code" ||
+      selectedTool == "stopwatch"
     ) {
-      const element = {
-        ...data,
-        type: selectedTool,
-        str: "",
-        ...params,
-        z: transforms.zMax + 1,
-      };
-
-      const { id } = frame.actions.createElement(element, true);
       frame.actions.setSelectedTool(frame.id, "select");
       frame.actions.setSelection(frame.id, id);
     }

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

@@ -1,10 +1,14 @@
+import { Markdown } from "@cocalc/frontend/components";
+
 export default function Generic({ element, focused }) {
   focused = focused;
-  const { str, data } = element;
   return (
-    <>
-      {str != null && str}
-      {data != null && <span>{JSON.stringify(data, undefined, 2)}</span>}
-    </>
+    <Markdown
+      value={"```js\n" + JSON.stringify(element, undefined, 2) + "\n```"}
+      style={{
+        width: "100%",
+        height: "100%",
+      }}
+    />
   );
 }

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

@@ -9,30 +9,31 @@ import Code from "./code";
 import Frame from "./frame";
 import Generic from "./generic";
 import Pen from "./pen";
+import Stopwatch from "./stopwatch";
 
 interface Props {
   element: Element;
   focused: boolean;
   canvasScale: number;
 }
 
-export default function Render({ element, focused, canvasScale }: Props) {
+export default function Render(props: Props) {
   /* dumb for now, but will be a cool plugin system like we used for our slate wysiwyg editor....*/
 
-  switch (element.type) {
+  switch (props.element.type) {
     case "text":
-      return <Text element={element} focused={focused} />;
+      return <Text {...props} />;
     case "note":
-      return <Note element={element} focused={focused} />;
+      return <Note {...props} />;
     case "code":
-      return <Code element={element} focused={focused} />;
+      return <Code {...props} />;
     case "frame":
-      return (
-        <Frame element={element} focused={focused} canvasScale={canvasScale} />
-      );
+      return <Frame {...props} />;
     case "pen":
-      return <Pen element={element} focused={focused} />;
+      return <Pen {...props} />;
+    case "stopwatch":
+      return <Stopwatch {...props} />;
     default:
-      return <Generic element={element} focused={focused} />;
+      return <Generic {...props} />;
   }
 }

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

@@ -0,0 +1,48 @@
+import { Stopwatch as StopwatchEditor } from "@cocalc/frontend/editors/stopwatch/stopwatch";
+import { getStyle } from "./text";
+import { useFrameContext } from "../hooks";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
+
+export default function Stopwatch({ element, focused }) {
+  const { actions } = useFrameContext();
+  const { data } = element;
+  function set(obj) {
+    actions.setElement({
+      id: element.id,
+      data: { ...data, ...obj, time: webapp_client.server_time() - 0 },
+    });
+  }
+
+  return (
+    <StopwatchEditor
+      noLabel
+      noDelete
+      compact
+      noButtons={!focused}
+      state={data?.state ?? "stopped"}
+      time={data?.time ?? 0}
+      total={data?.total ?? 0}
+      click_button={(button: string) => {
+        if (button == "start") {
+          set({ state: "running" });
+        } else if (button == "reset") {
+          set({ state: "stopped", total: 0 });
+        } else if (button == "pause") {
+          set({
+            total:
+              (data?.total ?? 0) +
+              (webapp_client.server_time() - (data?.time ?? 0)),
+            state: "paused",
+          });
+        }
+      }}
+      timeStyle={getStyle(element, { fontSize: 20 })}
+      style={{
+        overflow: "scroll",
+        border: "1px solid lightgrey",
+        borderRadius: "5px",
+        boxShadow: "0 0 5px grey",
+      }}
+    />
+  );
+}

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

@@ -19,7 +19,6 @@ export default function Text({ element, focused }: Props) {
     setValue(element.str ?? "");
   }, [element.str]);
 
-
   if (!focused) {
     return (
       <Markdown
@@ -69,10 +68,19 @@ export default function Text({ element, focused }: Props) {
   );
 }
 
-function getStyle(element) {
+export function getStyle(
+  element,
+  defaults?: {
+    color?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    background?: string;
+  }
+) {
   return {
-    color: element.data?.color,
-    fontSize: element.data?.fontSize,
-    fontFamily: element.data?.fontFamily,
+    color: element.data?.color ?? defaults?.color,
+    fontSize: element.data?.fontSize ?? defaults?.fontSize,
+    fontFamily: element.data?.fontFamily ?? defaults?.fontFamily,
+    background: element.data?.background ?? defaults?.background,
   };
 }