Basic z ordering

components/canvas/canvas.tsx

@@ -56,6 +56,10 @@ const MainSVG = styled("svg", {
   height: "100%",
   touchAction: "none",
   zIndex: 100,
+
+  "& *": {
+    userSelect: "none",
+  },
 })
 
 const MainGroup = styled("g", {})

components/canvas/page.tsx

@@ -9,10 +9,11 @@ here; and still cheaper than any other pattern I've found.
 */
 
 export default function Page() {
-  const currentPageShapeIds = useSelector(
-    ({ data }) => Object.keys(getPage(data).shapes),
-    deepCompareArrays
-  )
+  const currentPageShapeIds = useSelector(({ data }) => {
+    return Object.values(getPage(data).shapes)
+      .sort((a, b) => a.childIndex - b.childIndex)
+      .map((shape) => shape.id)
+  }, deepCompareArrays)
 
   return (
     <>

components/canvas/shape.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useRef, memo } from "react"
 import state, { useSelector } from "state"
 import inputs from "state/inputs"
-import { getShapeUtils } from "lib/shape-utils"
 import styled from "styles"
+import { getShapeUtils } from "lib/shape-utils"
 import { getPage } from "utils/utils"
 
 function Shape({ id }: { id: string }) {