Split layout and draw for slots (#524)

* Split layout and draw for slots

* nit

* nit

* Fix serialization

* Move effect (highlight/invalid) to layout calculation

* nit

* Fix type issue

* Resolve review comments

src/utils/layout.ts

@@ -0,0 +1,21 @@
+import { Point, ReadOnlyRect } from "@/interfaces"
+
+export class LayoutElement<T> {
+  public readonly value: T
+  public readonly boundingRect: ReadOnlyRect
+
+  constructor(o: {
+    value: T
+    boundingRect: ReadOnlyRect
+  }) {
+    this.value = o.value
+    this.boundingRect = o.boundingRect
+  }
+
+  get center(): Point {
+    return [
+      this.boundingRect[0] + this.boundingRect[2] / 2,
+      this.boundingRect[1] + this.boundingRect[3] / 2,
+    ]
+  }
+}