Use preact to render the tree (#155)

* Use preact to render the tree

* More changes to renderHtml

src/app/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './useFocus'
 export * from './useModel'
 export * from './useOnDrag'
 export * from './useOnHover'

src/app/hooks/useFocus.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'preact/hooks'
+
+export function useFocus(): [boolean, () => unknown] {
+	const [active, setActive] = useState(false)
+
+	const hider = () => {
+		setActive(false)
+	}
+
+	useEffect(() => {
+		if (active) {
+			document.body.addEventListener('click', hider)
+		}
+		return () => {
+			document.body.removeEventListener('click', hider)
+		}
+	}, [active])
+
+	return [active, () => setActive(true)]
+}

src/app/hooks/useModel.ts

@@ -12,7 +12,6 @@ export function useModel(model: DataModel | undefined | null, invalidated: (mode
 
 	useEffect(() => {
 		model?.addListener(listener)
-		listener.invalidated()
 		return () => {
 			model?.removeListener(listener)
 		}