whiteboard: much less awkward use of useFrameContext hook

Author: williamstein

src/packages/frontend/frame-editors/frame-tree/frame-context.ts

@@ -15,7 +15,7 @@ import { createContext, useContext } from "react";
 import { Actions } from "../code-editor/actions";
 import { Map } from "immutable";
 
-interface IFrameContext {
+export interface IFrameContext {
   id: string;
   project_id: string;
   path: string;

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

@@ -20,11 +20,9 @@ import RenderElement from "./elements/render";
 import Focused, { FOCUSED_BORDER_COLOR } from "./focused";
 import NotFocused from "./not-focused";
 import Position from "./position";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
+import { useFrameContext } from "./hooks";
 import usePinchToZoom from "@cocalc/frontend/frame-editors/frame-tree/pinch-to-zoom";
 import Grid from "./elements/grid";
-
-import { Actions } from "./actions";
 import {
   fontSizeToZoom,
   getPageSpan,
@@ -121,7 +119,6 @@ export default function Canvas({
   }, [font_size, scale, transforms.width, transforms.height]);
 
   const frame = useFrameContext();
-  const actions = frame.actions as Actions;
 
   // handle setting a center position for the visible window
   useEffect(() => {
@@ -167,7 +164,7 @@ export default function Canvas({
 
   useEffect(() => {
     if (fitToScreen) {
-      actions.set_frame_tree({ id: frame.id, fitToScreen: false });
+      frame.actions.set_frame_tree({ id: frame.id, fitToScreen: false });
     }
   }, [fitToScreen]);
 
@@ -315,7 +312,7 @@ export default function Canvas({
               y: (visible.yMax + visible.yMin) / 2,
             };
             const { x, y } = data;
-            actions.setVisibleWindowCenter(frame.id, {
+            frame.actions.setVisibleWindowCenter(frame.id, {
               x: ctr.x + (x - x0) / canvasScale,
               y: ctr.y + (y - y0) / canvasScale,
             });
@@ -365,7 +362,7 @@ export default function Canvas({
       if (e.target == gridDivRef.current) {
         // clear selection
         // unfocus, because nothing got clicked on.
-        actions.setFocusedElement(frame.id, "");
+        frame.actions.setFocusedElement(frame.id, "");
       } else {
         // clicked on an element on the canvas; either stay selected or let
         // it handle selecting it.
@@ -393,9 +390,9 @@ export default function Canvas({
         z: transforms.zMax + 1,
       };
 
-      const { id } = actions.createElement(element, true);
-      actions.setSelectedTool(frame.id, "select");
-      actions.setFocusedElement(frame.id, id);
+      const { id } = frame.actions.createElement(element, true);
+      frame.actions.setSelectedTool(frame.id, "select");
+      frame.actions.setFocusedElement(frame.id, id);
     }
   }
 
@@ -415,7 +412,7 @@ export default function Canvas({
           );
           const xMax = xMin + width / canvasScale;
           const yMax = yMin + height / canvasScale;
-          actions.saveVisibleWindow(frame.id, { xMin, yMin, xMax, yMax });
+          frame.actions.saveVisibleWindow(frame.id, { xMin, yMin, xMax, yMax });
         }, 50);
       }, [transforms, canvasScale]);
 
@@ -468,7 +465,7 @@ export default function Canvas({
         pt.y = pt.y - yMin;
       }
 
-      actions.createElement(
+      frame.actions.createElement(
         {
           x: xMin,
           y: yMin,
@@ -533,7 +530,7 @@ export default function Canvas({
             navDrag.current = null;
             return;
           }
-          actions.setVisibleWindowCenter(frame.id, evtToData(e));
+          frame.actions.setVisibleWindowCenter(frame.id, evtToData(e));
           return;
         }
         if (!readOnly) {

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

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { Input } from "antd";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
-import { Actions } from "../actions";
+import { useFrameContext } from "../hooks";
 import { Element } from "../types";
 import { Markdown } from "@cocalc/frontend/components";
 
@@ -55,8 +54,7 @@ export default function Code({ element, focused }: Props) {
         setValue(e.target.value);
       }}
       onBlur={() => {
-        const actions = frame.actions as Actions;
-        actions.setElement({ id: element.id, str: value });
+        frame.actions.setElement({ id: element.id, str: value });
       }}
     />
   );

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

@@ -1,8 +1,7 @@
 import { useEffect, useState } from "react";
 import { Markdown } from "@cocalc/frontend/components";
 import { Input, Popover } from "antd";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
-import { Actions } from "../actions";
+import { useFrameContext } from "../hooks";
 import { Icon } from "@cocalc/frontend/components/icon";
 import { Element } from "../types";
 import { path_split } from "@cocalc/util/misc";
@@ -52,8 +51,7 @@ export default function Text({ element, focused }: Props) {
                 setValue(e.target.value);
               }}
               onBlur={() => {
-                const actions = frame.actions as Actions;
-                actions.setElement({ id: element.id, str: value });
+                frame.actions.setElement({ id: element.id, str: value });
               }}
             />
           </div>

src/packages/frontend/frame-editors/whiteboard-editor/focused-resize.tsx

@@ -7,8 +7,7 @@ import { Tooltip } from "antd";
 import { Icon } from "@cocalc/frontend/components/icon";
 import { Element } from "./types";
 import { CSSProperties, useState } from "react";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
-import { Actions } from "./actions";
+import { useFrameContext } from "./hooks";
 import Draggable from "react-draggable";
 import { getPosition } from "./math";
 
@@ -97,7 +96,6 @@ export default function DragHandle({
         setOffset(getOffset(data));
       }}
       onStop={(_, data) => {
-        const actions = frame.actions as Actions;
         let { w, h, x, y } = getPosition(element);
         const offset = getOffset(data);
 
@@ -119,7 +117,7 @@ export default function DragHandle({
               path[i] = element.data.path[i] * scale_x;
               path[i + 1] = element.data.path[i + 1] * scale_y;
             }
-            actions.setElement({
+            frame.actions.setElement({
               id: element.id,
               x,
               y,
@@ -128,7 +126,7 @@ export default function DragHandle({
               data: { ...element.data, path },
             });
           } else {
-            actions.setElement({ id: element.id, x, y, w, h });
+            frame.actions.setElement({ id: element.id, x, y, w, h });
           }
         }, 0);
       }}

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

@@ -12,8 +12,7 @@ import { ReactNode, useMemo, useRef, useState } from "react";
 import Draggable from "react-draggable";
 import { getAngle, getPosition } from "./math";
 import { Icon } from "@cocalc/frontend/components/icon";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
-import { Actions } from "./actions";
+import { useFrameContext } from "./hooks";
 import EditBar from "./tools/edit-bar";
 import { Element } from "./types";
 import DragHandle from "./focused-resize";
@@ -120,9 +119,8 @@ export default function Focused({
               break;
             }
           }
-          const actions = frame.actions as Actions;
           setTimeout(() => {
-            actions.setElement({ id, rotate });
+            frame.actions.setElement({ id, rotate });
             setRotating(undefined);
           }, 0);
         }}
@@ -215,8 +213,7 @@ export default function Focused({
           const { id } = element;
           const x = element.x + data.x;
           const y = element.y + data.y;
-          const actions = frame.actions as Actions;
-          actions.setElement({ id, x, y });
+          frame.actions.setElement({ id, x, y });
         }}
       >
         <div

src/packages/frontend/frame-editors/whiteboard-editor/hooks.ts

@@ -0,0 +1,19 @@
+import {
+  useFrameContext as useFrameContextGeneric,
+  IFrameContext,
+} from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
+import { Actions } from "./actions";
+
+// https://stackoverflow.com/questions/41285211/overriding-interface-property-type-defined-in-typescript-d-ts-file
+type Modify<T, R> = Omit<T, keyof R> & R;
+
+type WhiteboardFrameContext = Modify<
+  IFrameContext,
+  {
+    actions: Actions;
+  }
+>;
+
+export function useFrameContext(): WhiteboardFrameContext {
+  return useFrameContextGeneric() as WhiteboardFrameContext;
+}

src/packages/frontend/frame-editors/whiteboard-editor/not-focused.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
-import { Actions } from "./actions";
+import { useFrameContext } from "./hooks";
 
 interface Props {
   children: ReactNode;
@@ -23,7 +22,8 @@ export default function NotFocused({
         !readOnly && selectable
           ? (e) => {
               e.stopPropagation();
-              (frame.actions as Actions).setFocusedElement(frame.id, id);
+              console.log(e);
+              frame.actions.setFocusedElement(frame.id, id);
             }
           : undefined
       }

src/packages/frontend/frame-editors/whiteboard-editor/time-travel.tsx

@@ -3,7 +3,7 @@ Viewer used by time travel to show whiteboard canvas at a particular point in ti
 */
 import Canvas from "./canvas";
 import NavigationPanel from "./tools/navigation";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
+import { useFrameContext } from "./hooks";
 
 export default function WhiteboardTimeTravel({ syncdb, version, font_size }) {
   const { isFocused } = useFrameContext();

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

@@ -8,7 +8,7 @@ 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 { useFrameContext } from "../hooks";
 import { Actions } from "../actions";
 import { BrushPreview, maxRadius } from "./pen";
 import ColorPicker from "@cocalc/frontend/components/color-picker";
@@ -27,8 +27,7 @@ interface Props {
 }
 
 export default function EditBar({ elements }: Props) {
-  const frame = useFrameContext();
-  const actions = frame.actions as Actions;
+  const { actions } = useFrameContext();
   if (elements.length == 0) return null;
   return (
     <div

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

@@ -9,9 +9,9 @@ high level map view.
 import { ReactNode, useState } from "react";
 import { Icon, IconName } from "@cocalc/frontend/components/icon";
 import { Button, Tooltip } from "antd";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
-import { getPageSpan, fontSizeToZoom, ZOOM100 } from "../math";
+import { useFrameContext } from "../hooks";
 import { Actions } from "../actions";
+import { getPageSpan, fontSizeToZoom, ZOOM100 } from "../math";
 import { PANEL_STYLE } from "./panel";
 import Canvas from "../canvas";
 import { Element } from "../types";

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

@@ -7,7 +7,7 @@ import { Button, Popconfirm, Slider, Tooltip } from "antd";
 import { PANEL_STYLE } from "./panel";
 import { Icon } from "@cocalc/frontend/components/icon";
 import ColorPicker from "@cocalc/frontend/components/color-picker";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
+import { useFrameContext } from "../hooks";
 import { debounce } from "lodash";
 import { STYLE } from "../elements/note";
 import { DEFAULT_FONT_SIZE, minFontSize, maxFontSize } from "./defaults";

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

@@ -8,9 +8,7 @@ import { CSSProperties, ReactNode } from "react";
 import { Button, Tooltip } from "antd";
 import { Icon } from "@cocalc/frontend/components/icon";
 import { TOOLS } from "./spec";
-//import Draggable from "react-draggable";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
-import { Actions } from "../actions";
+import { useFrameContext } from "../hooks";
 
 export const PANEL_STYLE = {
   zIndex: 1000,
@@ -30,7 +28,14 @@ export default function Panel({ selectedTool }) {
     );
   }
   return (
-    <div style={{ ...PANEL_STYLE, width:'46px', display: "flex", flexDirection: "column" }}>
+    <div
+      style={{
+        ...PANEL_STYLE,
+        width: "46px",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
       {v}
     </div>
   );
@@ -44,7 +49,7 @@ function ToolButton({ tool, isSelected }) {
       <Button
         type="text"
         onClick={() => {
-          (actions as Actions).setSelectedTool(id, tool);
+          actions.setSelectedTool(id, tool);
         }}
       >
         <Icon

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

@@ -7,7 +7,7 @@ import { Button, Slider, Tooltip } from "antd";
 import { PANEL_STYLE } from "./panel";
 import { Icon } from "@cocalc/frontend/components/icon";
 import ColorPicker from "@cocalc/frontend/components/color-picker";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
+import { useFrameContext } from "../hooks";
 import { debounce } from "lodash";
 import { ResetButton } from "./note";
 

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

@@ -2,8 +2,7 @@ import { ReactNode, RefObject, useRef } from "react";
 import { Dropzone, FileUploadWrapper } from "@cocalc/frontend/file-upload";
 import { aux_file } from "@cocalc/util/misc";
 const AUX_FILE_EXT = "upload";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
-import { Actions } from "../actions";
+import { useFrameContext } from "../hooks";
 import { join } from "path";
 
 interface Props {
@@ -35,7 +34,7 @@ export default function Upload({ children, evtToDataRef }: Props) {
         // is an image
         str = `<img src="${filename}" style="object-fit:cover"/>`;
       }
-      (actions as Actions).createElement({
+      actions.createElement({
         ...location,
         type: "text",
         str,

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

@@ -8,7 +8,7 @@ import ToolPanel from "./tools/panel";
 import PenPanel from "./tools/pen";
 import NotePanel from "./tools/note";
 import NavigationPanel from "./tools/navigation";
-import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
+import { useFrameContext } from "./hooks";
 import Upload from "./tools/upload";
 
 interface Props {