@macrostrat/column-components/dist/notes/note.js

React rendering primitives for stratigraphic columns

import { useMemo, useRef, useEffect, useContext } from "react";
import h from "../hyper.js";
import { useNoteLayout } from "./layout.js";
import { NoteEditorContext } from "./editor.js";
import { NoteConnector, NotePositioner } from "./connector.js";
import { useColumn } from "../context/column.js";
function NotesList(props) {
  let { onClickNote, ...rest } = props;
  const {
    notes,
    nodes: nodeIndex,
    updateHeight,
    noteComponent,
    scale
  } = useNoteLayout();
  const { pixelHeight: columnHeight } = useColumn();
  const notesInfo = useMemo(() => {
    let notes1 = notes.map((note) => {
      const node = nodeIndex[note.id];
      const pixelHeight = node?.width ?? 10;
      const pixelOffset = node?.currentPos ?? scale(note.top_height);
      return {
        note,
        node,
        pixelOffset,
        pixelHeight,
        spacing: {
          above: pixelOffset - pixelHeight,
          below: columnHeight - pixelOffset
        }
      };
    });
    for (let i = 0; i < notes1.length; i++) {
      const { spacing, pixelOffset } = notes1[i];
      if (i > 0) {
        const prevNote = notes1[i - 1];
        spacing.above = pixelOffset - prevNote.pixelOffset - prevNote.pixelHeight;
        prevNote.spacing.below = spacing.above;
      }
    }
    return notes1;
  }, [notes, nodeIndex, scale]);
  return h(
    "g.notes-list",
    notesInfo.map(({ note, pixelOffset, pixelHeight, spacing }) => {
      if (pixelOffset == null || pixelHeight == null) {
        return null;
      }
      return h(Note, {
        key: note.id,
        note,
        pixelOffset,
        pixelHeight,
        updateHeight,
        onClick: onClickNote,
        noteBodyComponent: noteComponent,
        spacing,
        ...rest
      });
    })
  );
}
function Note(props) {
  const {
    note,
    pixelOffset,
    pixelHeight,
    updateHeight,
    deltaConnectorAttachment,
    noteBodyComponent,
    spacing,
    onClick
  } = props;
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current) {
      const newHeight = ref.current.offsetHeight;
      if (newHeight !== pixelHeight) {
        updateHeight(note.id, newHeight);
      }
    }
  }, [note, pixelHeight, updateHeight]);
  const offsetY = pixelOffset;
  const noteHeight = pixelHeight;
  const { setEditingNote, editingNote } = useContext(NoteEditorContext);
  const onClick_ = onClick ?? setEditingNote;
  const _onClickHandler = useMemo(() => {
    if (!onClick_) return void 0;
    return (evt) => {
      onClick_(note);
    };
  }, [onClick_]);
  if (editingNote === note) {
    return null;
  }
  return h("g.note", [
    h(NoteConnector, { note, deltaConnectorAttachment }),
    h(
      NotePositioner,
      {
        offsetY,
        noteHeight,
        ref,
        onClick: _onClickHandler
      },
      h(noteBodyComponent, { note, spacing })
    )
  ]);
}
export {
  NoteConnector,
  NotePositioner,
  NotesList
};
//# sourceMappingURL=note.js.map