board: ensure z index always set

Author: williamstein

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

@@ -16,6 +16,7 @@ import {
 import { Tool } from "./tools/spec";
 import { Element, Elements } from "./types";
 import { uuid } from "@cocalc/util/misc";
+import { getPageSpan } from "./math";
 
 export interface State extends CodeEditorState {
   elements: Elements;
@@ -62,6 +63,14 @@ export class Actions extends BaseActions<State> {
       const id = uuid().slice(0, 8);
       obj = { id, ...obj };
     }
+    if (obj.z == null) {
+      // most calls to createElement should NOT resort to having to do this.
+      let { zMax } = getPageSpan(
+        this.store.get("elements").toJS() as Element[],
+        0
+      );
+      obj.z = zMax + 1;
+    }
     this.setElement(obj, commit);
     return obj as Element;
   }

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

@@ -387,6 +387,7 @@ export default function Canvas({
     ) {
       const { id } = actions.createElement(
         {
+          z: transforms.zMax + 1,
           ...data,
           type: selectedTool,
           str: "",
@@ -472,6 +473,7 @@ export default function Canvas({
         {
           x: xMin,
           y: yMin,
+          z: transforms.zMax + 1,
           w: xMax - xMin + 1,
           h: yMax - yMin + 1,
           data: { path: compressPath(path), ...getPenParams() },

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

@@ -14,19 +14,26 @@ export default function Code({ element, focused }: Props) {
   const [value, setValue] = useState<string>(element.str ?? "");
   const frame = useFrameContext();
 
+  const style = {
+    fontSize: element.data?.fontSize,
+    border: element.data?.color
+      ? `2px solid ${element.data?.color}`
+      : undefined,
+  };
+
   if (!focused) {
     const val =
       "```py\n" + (element.str?.trim() ? element.str : "Type code") + "\n```";
     return (
-      <Markdown
-        value={val}
-        style={{
-          width: "100%",
-          height: "100%",
-          color: element.data?.color,
-          fontSize: element.data?.fontSize,
-        }}
-      />
+      <div style={style}>
+        <Markdown
+          value={val}
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      </div>
     );
   }
 
@@ -37,6 +44,7 @@ export default function Code({ element, focused }: Props) {
 
   return (
     <Input.TextArea
+      style={style}
       className="nodrag"
       placeholder="Type code"
       autoFocus

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

@@ -83,6 +83,7 @@ export function getPageSpan(
     yMin -= margin;
     xMax += margin;
     yMax += margin;
+    // do NOT add to z!
   }
   return { xMin, xMax, yMin, yMax, zMin, zMax };
 }
@@ -131,3 +132,4 @@ export function scalePath(path: Point[], scale): Point[] {
   }
   return v;
 }
+