board: implement bring to front and send to back

Author: williamstein

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

@@ -65,7 +65,7 @@ export class Actions extends BaseActions<State> {
     }
     if (obj.z == null) {
       // most calls to createElement should NOT resort to having to do this.
-      let { zMax } = getPageSpan(
+      const { zMax } = getPageSpan(
         this.store.get("elements").toJS() as Element[],
         0
       );

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

@@ -385,16 +385,15 @@ export default function Canvas({
       selectedTool == "note" ||
       selectedTool == "code"
     ) {
-      const { id } = actions.createElement(
-        {
-          z: transforms.zMax + 1,
-          ...data,
-          type: selectedTool,
-          str: "",
-          ...params,
-        },
-        true
-      );
+      const element = {
+        ...data,
+        type: selectedTool,
+        str: "",
+        ...params,
+        z: transforms.zMax + 1,
+      };
+
+      const { id } = actions.createElement(element, true);
       actions.setSelectedTool(frame.id, "select");
       actions.setFocusedElement(frame.id, id);
     }

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 { CSSProperties, ReactNode, useState } from "react";
-import { Button, InputNumber, Select, Tooltip } from "antd";
+import { Button, InputNumber, Menu, Dropdown, Select, Tooltip } from "antd";
 const { Option } = Select;
 import { Element } from "../types";
 import { PANEL_STYLE } from "./panel";
@@ -13,6 +13,7 @@ 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 { getPageSpan } from "../math";
 
 import {
   DEFAULT_FONT_SIZE,
@@ -44,6 +45,7 @@ export default function EditBar({ elements }: Props) {
         <FontSize actions={actions} elements={elements} />
         <ColorButton actions={actions} elements={elements} />
         <DeleteButton actions={actions} elements={elements} />
+        <OtherOperations actions={actions} elements={elements} />
       </div>
     </div>
   );
@@ -224,6 +226,53 @@ function getFontFamily(elements: Element[]): string | undefined {
   return DEFAULT_FONT_FAMILY;
 }
 
+function OtherOperations({ actions, elements }: ButtonProps) {
+  const frame = useFrameContext();
+  const menu = (
+    <Menu
+      onClick={({ key }) => {
+        if (key == "bring-to-front") {
+          const { zMax } = getPageSpan(elements);
+          let z = zMax + 1;
+          for (const element of elements) {
+            actions.setElement({ ...element, z }, false);
+            z += 1;
+          }
+          actions.syncstring_commit();
+          actions.setFocusedElement(frame.id, "");
+        } else if (key == "send-to-back") {
+          const { zMin } = getPageSpan(elements);
+          let z = zMin - 1;
+          console.log("zMin = ", zMin, "  z = ", z);
+          for (const element of elements) {
+            actions.setElement({ ...element, z }, false);
+            z -= 1;
+          }
+          actions.syncstring_commit();
+          actions.setFocusedElement(frame.id, "");
+          return;
+        }
+      }}
+    >
+      <Menu.Item key="bring-to-front">Bring to front</Menu.Item>
+      <Menu.Item key="send-to-back">Send to back</Menu.Item>
+    </Menu>
+  );
+
+  return (
+    <Dropdown overlay={menu} trigger={["click"]}>
+      <Icon
+        name="ellipsis"
+        style={{
+          padding: "12px 10px 0",
+          borderLeft: "1px solid #ccc",
+          cursor: "pointer",
+        }}
+      />
+    </Dropdown>
+  );
+}
+
 function setDataField(
   {
     elements,

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

@@ -147,6 +147,7 @@ function NotePreview({
 }) {
   return (
     <Tooltip
+      placement="right"
       title={
         `Font size: ${fontSize}px` +
         (fontFamily ? `, Font family: ${fontFamily}` : "")