Basic info dialog

src/components/infos/Infos.module.css

@@ -0,0 +1,26 @@
+.control {
+  opacity: 1;
+  position: fixed !important;
+  top: 0px;
+  margin-left: calc(100% - 70px) !important;
+  z-index: 1;
+}
+
+.title {
+  background-color: rgba(14, 116, 144, 0.7);
+  color: white;
+  clear: both;
+}
+
+.title-text {
+  float: left;
+}
+
+.close {
+  float: right;
+}
+
+.body {
+  padding: 20px;
+  background-color: rgba(255, 255, 255, 0.7);
+}

src/components/infos/Infos.tsx

@@ -0,0 +1,76 @@
+import { Dialog, DialogTitle, IconButton } from '@suid/material';
+import { Feature } from 'ol';
+import { Geometry } from 'ol/geom';
+import { Component, createSignal, For } from 'solid-js';
+import { unwrap } from 'solid-js/store';
+import CloseIcon from '@suid/icons-material/Close';
+import { tree } from '../map';
+import style from './Infos.module.css';
+import { Paper, Stack } from '@suid/material';
+import styled from '@suid/material/styles/styled';
+
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
+
+const [open, setOpen] = createSignal(false);
+
+let selectedFeatures: Feature[] = [];
+
+export const clickHandler = (event: any) => {
+  const pixel = [event.originalEvent.x, event.originalEvent.y];
+  const features = event.map.getFeaturesAtPixel(pixel, { hitTolerance: 30 });
+  console.log({
+    caller: '<Infos/> / clickHandler',
+    event,
+    features,
+    tree: unwrap(tree),
+  });
+  selectedFeatures.map((feature) => feature.set('isSelected', false));
+  selectedFeatures = features;
+  features.map((feature: Feature<Geometry>) => {
+    const id = feature.get('id');
+    feature.set('isSelected', true);
+    console.log({
+      caller: '<Infos/> / clickHandler / feature',
+      event,
+      feature,
+      id,
+    });
+    const branch = tree[id];
+    if (branch?.updateHandler) branch.updateHandler(feature);
+  });
+  if (features.length > 0) {
+    setOpen(true);
+  }
+};
+
+const Infos: Component<{}> = (props) => {
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Dialog onClose={handleClose} open={open()} class={style.dialog}>
+      <DialogTitle class={style.title}>
+        <div class={style['title-text']}>Nearby</div>
+        <IconButton onClick={handleClose} class={style.close}>
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <Stack spacing={1}>
+        <For each={selectedFeatures}>
+          {(feature) => <Item>{feature.get('type')}</Item>}
+        </For>
+      </Stack>
+    </Dialog>
+  );
+};
+
+export default Infos;

src/components/infos/index.ts

@@ -0,0 +1 @@
+export { default, clickHandler } from './Infos';