whiteboard: make it so you can select multiple items (via xxx-click); can't do anything with them yet...

Author: williamstein

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

@@ -79,10 +79,38 @@ export class Actions extends BaseActions<State> {
     this._syncstring.delete({ id });
   }
 
-  public setFocusedElement(frameId: string, focusedId: string): void {
+  public clearSelection(frameId: string): void {
     const node = this._get_frame_node(frameId);
     if (node == null) return;
-    this.set_frame_tree({ id: frameId, focusedId });
+    this.set_frame_tree({ id: frameId, selection: [] });
+  }
+
+  public setSelection(
+    frameId: string,
+    id: string,
+    type: "add" | "remove" | "only" | "toggle" = "only"
+  ): void {
+    const node = this._get_frame_node(frameId);
+    if (node == null) return;
+    let selection = node.get("selection")?.toJS() ?? [];
+    if (type == "toggle") {
+      const i = selection.indexOf(id);
+      if (i == -1) {
+        selection.push(id);
+      } else {
+        selection.splice(i, 1);
+      }
+    } else if (type == "add") {
+      if (selection.includes(id)) return;
+      selection.push(id);
+    } else if (type == "remove") {
+      const i = selection.indexOf(id);
+      if (i == -1) return;
+      selection.splice(i, 1);
+    } else if (type == "only") {
+      selection = [id];
+    }
+    this.set_frame_tree({ id: frameId, selection });
   }
 
   public setSelectedTool(frameId: string, selectedTool: Tool): void {

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

@@ -17,7 +17,7 @@ import {
 import { Element, Point } from "./types";
 import { Tool, TOOLS } from "./tools/spec";
 import RenderElement from "./elements/render";
-import Focused, { FOCUSED_BORDER_COLOR } from "./focused";
+import Focused, { SELECTED_BORDER_COLOR } from "./focused";
 import NotFocused from "./not-focused";
 import Position from "./position";
 import { useFrameContext } from "./hooks";
@@ -43,7 +43,7 @@ interface Props {
   elements: Element[];
   font_size?: number;
   scale?: number; // use this if passed in; otherwise, deduce from font_size.
-  focusedId?: string;
+  selection?: Set<string>;
   selectedTool?: Tool;
   margin?: number;
   readOnly?: boolean;
@@ -57,7 +57,7 @@ export default function Canvas({
   elements,
   font_size,
   scale,
-  focusedId,
+  selection,
   margin,
   readOnly,
   selectedTool,
@@ -194,23 +194,26 @@ export default function Canvas({
     }
     */
 
-    const focused = id == focusedId;
+    const selected = selection?.has(id);
+    const focused = !!(selected && selection?.size === 1);
     let elt = (
       <RenderElement
         element={element}
         focused={focused}
         canvasScale={canvasScale}
       />
     );
-    if (!isNavRectangle && (element.style || focused || isNavigator)) {
+    if (!isNavRectangle && (element.style || selected || isNavigator)) {
       elt = (
         <div
           style={{
             ...element.style,
-            ...(focused
+            ...(selected
               ? {
                   cursor: "text",
-                  border: `${2 / canvasScale}px dashed ${FOCUSED_BORDER_COLOR}`,
+                  border: `${
+                    2 / canvasScale
+                  }px dashed ${SELECTED_BORDER_COLOR}`,
                   marginLeft: `-${2 / canvasScale}px`,
                   marginTop: `-${2 / canvasScale}px`,
                 }
@@ -361,8 +364,7 @@ export default function Canvas({
     if (selectedTool == "select") {
       if (e.target == gridDivRef.current) {
         // clear selection
-        // unfocus, because nothing got clicked on.
-        frame.actions.setFocusedElement(frame.id, "");
+        frame.actions.clearSelection(frame.id);
       } else {
         // clicked on an element on the canvas; either stay selected or let
         // it handle selecting it.
@@ -392,7 +394,7 @@ export default function Canvas({
 
       const { id } = frame.actions.createElement(element, true);
       frame.actions.setSelectedTool(frame.id, "select");
-      frame.actions.setFocusedElement(frame.id, id);
+      frame.actions.setSelection(frame.id, id);
     }
   }
 

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

@@ -14,6 +14,11 @@ interface Props {
 export default function Text({ element, focused }: Props) {
   const [value, setValue] = useState<string>(element.str ?? "");
   const frame = useFrameContext();
+  useEffect(() => {
+    // should really be a 3-way merge...
+    setValue(element.str ?? "");
+  }, [element.str]);
+
 
   if (!focused) {
     return (
@@ -26,11 +31,6 @@ export default function Text({ element, focused }: Props) {
     );
   }
 
-  useEffect(() => {
-    // should really be a 3-way merge...
-    setValue(element.str ?? "");
-  }, [element.str]);
-
   return (
     <div>
       <Popover

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

@@ -1,5 +1,5 @@
 /*
-Displays focused element with a border around it.
+Displays selected element with a border around it.
 
 NOTE that this is HTML and border width must be at least 1px.
 Given our CSS scale before this, if the scale is bigger than 2
@@ -19,7 +19,7 @@ import DragHandle from "./focused-resize";
 import Position from "./position";
 
 const thickness = 2;
-export const FOCUSED_BORDER_COLOR = "#40a9ff";
+export const SELECTED_BORDER_COLOR = "#40a9ff";
 const OFFSET = 50;
 const rotateEps = 0.07;
 const rotationSnaps: number[] = [];
@@ -225,7 +225,7 @@ export default function Focused({
               ? {
                   border: `${
                     thickness / canvasScale
-                  }px dashed ${FOCUSED_BORDER_COLOR}`,
+                  }px dashed ${SELECTED_BORDER_COLOR}`,
                   marginLeft: `${-thickness / canvasScale + offset.x}px`,
                   marginTop: `${-thickness / canvasScale + offset.y}px`,
                 }

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

@@ -22,8 +22,13 @@ export default function NotFocused({
         !readOnly && selectable
           ? (e) => {
               e.stopPropagation();
-              console.log(e);
-              frame.actions.setFocusedElement(frame.id, id);
+              frame.actions.setSelection(
+                frame.id,
+                id,
+                e.altKey || e.metaKey || e.ctrlKey || e.shiftKey
+                  ? "toggle"
+                  : "only"
+              );
             }
           : undefined
       }

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

@@ -238,7 +238,7 @@ function OtherOperations({ actions, elements }: ButtonProps) {
             z += 1;
           }
           actions.syncstring_commit();
-          actions.setFocusedElement(frame.id, "");
+          actions.clearSelection(frame.id);
         } else if (key == "send-to-back") {
           const { zMin } = getPageSpan(elements);
           let z = zMin - 1;
@@ -248,7 +248,7 @@ function OtherOperations({ actions, elements }: ButtonProps) {
             z -= 1;
           }
           actions.syncstring_commit();
-          actions.setFocusedElement(frame.id, "");
+          actions.clearSelection(frame.id);
           return;
         }
       }}

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

@@ -16,7 +16,7 @@ import { PANEL_STYLE } from "./panel";
 import Canvas from "../canvas";
 import { Element } from "../types";
 import Draggable from "react-draggable";
-import { FOCUSED_BORDER_COLOR } from "../focused";
+import { SELECTED_BORDER_COLOR } from "../focused";
 
 const TOOLS = {
   map: {
@@ -125,7 +125,7 @@ export default function Navigation({ fontSize, elements }: Props) {
             height: `${BAR_HEIGHT + height + resize.y}px`,
             opacity: "0.5",
             background: "lightblue",
-            border: `2px dashed ${FOCUSED_BORDER_COLOR}`,
+            border: `2px dashed ${SELECTED_BORDER_COLOR}`,
             zIndex: 1005,
           }}
         ></div>

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

@@ -70,8 +70,10 @@ export default function Whiteboard({
         <Canvas
           elements={x}
           font_size={font_size}
-          focusedId={
-            selectedTool == "select" ? desc.get("focusedId") : undefined
+          selection={
+            selectedTool == "select"
+              ? new Set(desc.get("selection")?.toJS() ?? [])
+              : undefined
           }
           selectedTool={selectedTool}
           fitToScreen={desc.get("fitToScreen")}