can draw history states

src/VisualEditor/HistorySVG.tsx

@@ -1,3 +1,33 @@
-export function ShallowHistorySVG() {
+import { Vec2D } from "./geometry";
+import { HISTORY_RADIUS } from "./parameters";
 
+export function HistorySVG(props: {uid: string, topLeft: Vec2D, kind: "shallow"|"deep", selected: boolean}) {
+  const text = props.kind === "shallow" ? "H" : "H*";
+  return <>
+    <circle
+      className={props.selected ? "selected":""}
+      cx={props.topLeft.x+HISTORY_RADIUS}
+      cy={props.topLeft.y+HISTORY_RADIUS}
+      r={HISTORY_RADIUS}
+      fill="white"
+      stroke="black"
+      strokeWidth={2}
+      data-uid={props.uid}
+      data-parts="history"
+    />
+    <text
+      x={props.topLeft.x+HISTORY_RADIUS}
+      y={props.topLeft.y+HISTORY_RADIUS+4}
+      textAnchor="middle"
+      fontWeight={500}
+      >{text}</text>
+    <circle
+      className="helper"
+      cx={props.topLeft.x+HISTORY_RADIUS}
+      cy={props.topLeft.y+HISTORY_RADIUS}
+      r={HISTORY_RADIUS}
+      data-uid={props.uid}
+      data-parts="history"
+    />
+  </>;
 }