Column updates

packages/column-components/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 2025-12-10
+
+- Major update to `Note` and note-related components
+- Add a `FocusableNoteColumn` mode based on the `EditableNoteColumn` component
+- Removed outdated note-related styles and simplified CSS scopes
+
 ## [1.3.1] - 2025-11-28
 
 - Update axis components

packages/column-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-components",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "React rendering primitives for stratigraphic columns",
   "keywords": [
     "geology",

packages/column-components/src/axis.ts

@@ -57,12 +57,21 @@ export function AgeAxis(props: AgeAxisProps) {
 
   let tickValues: number[] = undefined;
 
-  let ticks = Math.max(Math.round(pixelHeight / tickSpacing), 2);
-  if (pixelHeight < 3 * tickSpacing || scale.ticks(2).length < 2) {
-    // Push ticks towards extrema
-    const t0 = scale.ticks(4);
+  let ticks = Math.round(pixelHeight / tickSpacing);
+  if (pixelHeight < 3 * tickSpacing) {
+    // Push ticks towards extrema (we need more than 2 to be resolved)
+
+    let t0: number[] = [];
+    while (t0.length <= 2) {
+      ticks += 1;
+      t0 = scale.ticks(ticks);
+    }
 
-    tickValues = [t0[0], t0[t0.length - 1]];
+    tickValues = t0;
+    if (pixelHeight < 2 * tickSpacing) {
+      // Only show first and last ticks
+      tickValues = [t0[0], t0[t0.length - 1]];
+    }
   }
 
   if (pixelHeight < minTickSpacing) {

packages/column-components/src/hyper.ts

@@ -1,6 +1,11 @@
 import { hyperStyled } from "@macrostrat/hyper";
 import styles from "./main.module.scss";
+import noteStyles from "./notes/notes.module.sass";
 
-const h = hyperStyled(styles);
+const styles1 = { ...styles, ...noteStyles };
+
+const h = hyperStyled(styles1);
+
+console.log("Styles", styles1);
 
 export default h;

packages/column-components/src/main.module.scss

@@ -1,44 +1,3 @@
-.column-notes .col-note-label {
-  cursor: pointer;
-}
-.column-notes .note-editor.bp5-editable-text {
-  user-select: none;
-}
-.column-notes .note-editor.bp5-editable-text:before {
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.position-editor .handle {
-  background-color: #d2e9ff;
-  border: 1px solid #1e90ff;
-}
-.position-editor .add-span-handle {
-  background-color: #e9f4ff;
-  border: 1px dotted #1e90ff;
-}
-.position-editor .top-handle,
-.position-editor .bottom-handle,
-.position-editor .add-span-handle {
-  border-radius: 3px;
-}
-.note-editor .note-connector {
-  stroke: #1e90ff;
-  stroke-width: 3;
-}
-.col-note-label {
-  padding-left: 0.3em;
-  border-left: 1px solid var(--note-color);
-  margin: 1px 0;
-  font-style: italic;
-  z-index: 15;
-}
-g.height-range line {
-  stroke: var(--note-color);
-  stroke-width: 1.2px;
-}
-
 .column-image {
   position: absolute;
   top: 0;
@@ -79,32 +38,6 @@ g.height-range line {
 }
 
 :global {
-  g.note,
-  g.note-editor {
-    --note-color: var(
-      --column-note-color,
-      var(--column-stroke-color, var(--text-color, #000))
-    );
-  }
-  g.note circle,
-  g.note-editor circle {
-    fill: var(--note-color);
-  }
-  g.note .link,
-  g.note-editor .link {
-    stroke: var(--note-color);
-    stroke-width: 1;
-    fill: none;
-  }
-  .new-note circle {
-    fill: #1e90ff;
-  }
-  .new-note line {
-    stroke: #1e90ff;
-    stroke-width: 3;
-    marker-start: url("#new_arrow_start");
-    marker-end: url("#new_arrow_end");
-  }
   #new_arrow_start,
   #new_arrow_end {
     fill: #1e90ff;

packages/column-components/src/notes/connector.ts

@@ -40,7 +40,6 @@ const NotePositioner = forwardRef(function (
         {
           ref,
           onClick,
-          style: { margin: outerPad },
         },
         children,
       ),

packages/column-components/src/notes/editor.ts

@@ -35,9 +35,9 @@ const NoteTextEditor = function (props: NoteEditorProps) {
 interface NoteEditorProviderProps {
   inEditMode: boolean;
   noteEditor: ComponentType<NoteEditorProps>;
-  onUpdateNote: (n: NoteData) => void;
-  onDeleteNote: (n: NoteData) => void;
-  onCreateNote: Function;
+  onUpdateNote?: (n: NoteData) => void;
+  onDeleteNote?: (n: NoteData) => void;
+  onCreateNote?: Function;
   children?: React.ReactNode;
 }
 
@@ -50,7 +50,7 @@ function NoteEditorProvider(props: NoteEditorProviderProps) {
   const deleteNote = function () {
     const val = editingNote;
     setEditingNote(null);
-    return props.onDeleteNote(val);
+    return props.onDeleteNote?.(val);
   };
 
   const onCreateNote = function (pos) {
@@ -76,7 +76,7 @@ function NoteEditorProvider(props: NoteEditorProviderProps) {
     if (notes.includes(n)) {
       return;
     }
-    return props.onUpdateNote(n);
+    return props.onUpdateNote?.(n);
   };
 
   //# Model editor provider gives us a nice store
@@ -257,22 +257,19 @@ function PositionEditorInner(props) {
   );
 }
 
-const NoteEditorUnderlay = function ({ padding }) {
-  const { width } = useContext(NoteLayoutContext);
-  const { setEditingNote } = useContext(NoteEditorContext) as any;
+function NoteEditorUnderlay() {
   return h(NoteRect, {
-    fill: "rgba(255,255,255,0.8)",
     style: { pointerEvents: "none" },
     className: "underlay",
   });
-};
+}
 
-const NoteEditor = function (props) {
+function NoteEditor(props) {
   const { allowPositionEditing } = props;
-  const { noteEditor } = useContext(NoteEditorContext) as any;
+  const { noteEditor, setEditingNote } = useContext(NoteEditorContext) as any;
   const { notes, nodes, elementHeights, createNodeForNote } =
     useContext(NoteLayoutContext);
-  const { editedModel } = useModelEditor();
+  const { editedModel, model } = useModelEditor();
   if (editedModel == null) {
     return null;
   }
@@ -297,6 +294,8 @@ const NoteEditor = function (props) {
     node = newNode;
   }
 
+  const edited = editedModel === model;
+
   return h(ErrorBoundary, [
     h("g.note-editor.note", [
       h(NoteEditorUnderlay),
@@ -305,15 +304,30 @@ const NoteEditor = function (props) {
         note: editedModel,
         node,
       }),
-      h(NotePositioner, { offsetY: node.currentPos, noteHeight }, [
-        h(noteEditor, {
-          note: editedModel,
-          key: index,
-        }),
-      ]),
+      h(
+        NotePositioner,
+        {
+          offsetY: node.currentPos,
+          noteHeight,
+          onClick(evt) {
+            if (edited) {
+              setEditingNote(null);
+              evt.stopPropagation();
+            }
+          },
+        },
+        [
+          h(noteEditor, {
+            note: editedModel,
+            key: index,
+            focused: true,
+            edited,
+          }),
+        ],
+      ),
     ]),
   ]);
-};
+}
 
 export type { NoteData };
 export { NoteEditorProvider, NoteEditorContext, NoteTextEditor, NoteEditor };

packages/column-components/src/notes/height-range.ts

@@ -8,6 +8,7 @@ interface HeightRangeAnnotationProps {
   offsetX?: number;
   color?: string;
   lineInset?: number;
+  circleRadius?: number;
 }
 
 function HeightRangeAnnotation(props: HeightRangeAnnotationProps) {
@@ -18,6 +19,7 @@ function HeightRangeAnnotation(props: HeightRangeAnnotationProps) {
     offsetX = 0,
     color,
     lineInset = 1,
+    circleRadius = 2,
     ...rest
   } = props;
 
@@ -28,7 +30,11 @@ function HeightRangeAnnotation(props: HeightRangeAnnotationProps) {
   }
   const topHeight = bottomHeight - pxHeight;
 
-  const isLine = pxHeight > 2 * lineInset;
+  /* Use a value slightly greater than the circle diameter as the cutoff
+    to switch between line and circle, to account for a circle's greater
+    visual weight than the equivalent line height
+   */
+  const isLine = pxHeight > 3 * Math.max(lineInset, circleRadius);
 
   const transform = `translate(${offsetX},${topHeight})`;
 
@@ -40,7 +46,7 @@ function HeightRangeAnnotation(props: HeightRangeAnnotationProps) {
       y2: pxHeight - lineInset,
     }),
     h.if(!isLine)("circle", {
-      r: 2,
+      r: circleRadius,
       transform: `translate(0,${pxHeight / 2})`,
     }),
   ]);