@macrostrat/column-components
Version:
React rendering primitives for stratigraphic columns
298 lines (283 loc) • 12.2 kB
JavaScript
import {ColumnContext as $2QVk1$ColumnContext, ModelEditorProvider as $2QVk1$ModelEditorProvider, useModelEditor as $2QVk1$useModelEditor} from "./column-components.fa405a9f.js";
import $f5b828bbb980a05d$export$2e2bcd8739ae039 from "./column-components.e1d11b63.js";
import {ForeignObject as $039e0fecf5651a2f$export$86f236f5872f181} from "./column-components.0e8de8de.js";
import {NoteLayoutContext as $00c4b971e86fe1d8$export$20c7bffdb69233c9, NoteRect as $00c4b971e86fe1d8$export$b74b5a117fd60a1d} from "./column-components.2a78b581.js";
import {NoteConnector as $dd4ef284e468ce5f$export$a05ee380fe56e446, NotePositioner as $dd4ef284e468ce5f$export$ae56508882661985} from "./column-components.c5467e23.js";
import {hasSpan as $4c0de4777a549324$export$edcf47b10d53ec33} from "./column-components.bdaf6e51.js";
import {createContext as $2QVk1$createContext, useContext as $2QVk1$useContext, useState as $2QVk1$useState} from "react";
import {EditableText as $2QVk1$EditableText} from "@blueprintjs/core";
import $2QVk1$classnames from "classnames";
import $2QVk1$reactdraggable from "react-draggable";
import {ErrorBoundary as $2QVk1$ErrorBoundary} from "@macrostrat/ui-components";
const $788eb3ac0fd4a0dc$export$cbc16735c48a2e0f = (0, $2QVk1$createContext)({
inEditMode: false
});
const $788eb3ac0fd4a0dc$export$f3c30e51e696113d = function(props) {
const { updateModel: updateModel } = (0, $2QVk1$useModelEditor)();
const { note: note } = props;
return (0, $f5b828bbb980a05d$export$2e2bcd8739ae039)((0, $2QVk1$EditableText), {
multiline: true,
className: "col-note-label note-editing",
defaultValue: note.note,
isEditing: true,
onConfirm (newText) {
return updateModel({
note: {
$set: newText
}
});
}
});
};
function $788eb3ac0fd4a0dc$export$63b2a30da318abf8(props) {
let { children: children, inEditMode: inEditMode = false, noteEditor: noteEditor } = props;
const { notes: notes } = (0, $2QVk1$useContext)((0, $00c4b971e86fe1d8$export$20c7bffdb69233c9));
const [editingNote, setEditingNote] = (0, $2QVk1$useState)(null);
const deleteNote = function() {
const val = editingNote;
setEditingNote(null);
return props.onDeleteNote(val);
};
const onCreateNote = function(pos) {
const { height: height, top_height: top_height } = pos;
const val = {
height: height,
top_height: top_height,
note: null,
symbol: null
};
return setEditingNote(val);
};
const value = {
editingNote: editingNote,
setEditingNote: setEditingNote,
deleteNote: deleteNote,
inEditMode: inEditMode,
noteEditor: noteEditor,
onCreateNote: onCreateNote
};
const onConfirmChanges = function(n) {
if (n?.note == null && n == editingNote) {
console.log("No changes to note");
return;
}
if (notes.includes(n)) return;
return props.onUpdateNote(n);
};
//# Model editor provider gives us a nice store
return (0, $f5b828bbb980a05d$export$2e2bcd8739ae039)($788eb3ac0fd4a0dc$export$cbc16735c48a2e0f.Provider, {
value: value
}, [
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039)((0, $2QVk1$ModelEditorProvider), {
model: editingNote,
onDelete: deleteNote,
onConfirmChanges: onConfirmChanges,
logUpdates: true,
alwaysConfirm: true
}, children)
]);
}
const $788eb3ac0fd4a0dc$var$NoteConnectorPath = function(props) {
const { d: d, offsetX: offsetX, className: className } = props;
return (0, $f5b828bbb980a05d$export$2e2bcd8739ae039)("path", {
d: d,
className: className,
transform: `translate(${offsetX})`,
fill: "transparent"
});
};
const $788eb3ac0fd4a0dc$var$EditableNoteConnector = function(props) {
const { notes: notes, nodes: nodes, columnIndex: columnIndex, generatePath: generatePath, createNodeForNote: createNodeForNote } = (0, $2QVk1$useContext)((0, $00c4b971e86fe1d8$export$20c7bffdb69233c9));
let { note: note, node: node, index: index } = props;
if (note.id != null) node = nodes[note.id];
if (node == null) node = createNodeForNote(note);
const x = columnIndex[note.id] * 5 || 0;
const d = generatePath(node, x);
return (0, $f5b828bbb980a05d$export$2e2bcd8739ae039)([
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039)($788eb3ac0fd4a0dc$var$NoteConnectorPath, {
className: "note-connector",
d: d,
offsetX: x
}),
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039)((0, $039e0fecf5651a2f$export$86f236f5872f181), {
width: 30,
x: x,
y: 0,
height: 1,
style: {
overflowY: "visible"
}
}, (0, $f5b828bbb980a05d$export$2e2bcd8739ae039)($788eb3ac0fd4a0dc$var$PositionEditorInner, {
note: note
}))
]);
};
const $788eb3ac0fd4a0dc$var$PointHandle = function(props) {
let { height: height, size: size, className: className, ...rest } = props;
className = (0, $2QVk1$classnames)("handle point-handle", className);
if (size == null) size = 10;
return (0, $f5b828bbb980a05d$export$2e2bcd8739ae039)((0, $2QVk1$reactdraggable), {
position: {
x: 0,
y: height
},
axis: "y",
...rest
}, (0, $f5b828bbb980a05d$export$2e2bcd8739ae039)("div.handle", {
style: {
height: size,
width: size,
marginLeft: -size / 2,
marginTop: -size / 2,
position: "absolute"
},
className: className
}));
};
function $788eb3ac0fd4a0dc$var$PositionEditorInner(props) {
let updateModel;
let { note: note, margin: margin } = props;
if (margin == null) margin = 3;
const { scaleClamped: scale } = (0, $2QVk1$useContext)((0, $2QVk1$ColumnContext));
({ updateModel: updateModel, editedModel: note } = (0, $2QVk1$useModelEditor)());
if (note == null) return null;
const noteHasSpan = (0, $4c0de4777a549324$export$edcf47b10d53ec33)(note);
const bottomHeight = scale(note.height);
let topHeight = bottomHeight;
let height = 0;
if (noteHasSpan) {
topHeight = scale(note.top_height);
height = Math.abs(topHeight - bottomHeight);
}
const moveEntireNote = function(e, data) {
const { y: y } = data;
// Set note height
const spec = {
height: {
$set: scale.invert(y + height)
}
};
if (noteHasSpan) // Set note top height
spec.top_height = {
$set: scale.invert(y)
};
return updateModel(spec);
};
const moveTop = function(e, data) {
const spec = {
top_height: {
$set: scale.invert(data.y)
}
};
if (Math.abs(data.y - bottomHeight) < 2) spec.top_height = {
$set: null
};
return updateModel(spec);
};
const moveBottom = function(e, data) {
const spec = {
height: {
$set: scale.invert(data.y)
}
};
if (Math.abs(data.y - topHeight) < 2) spec.top_height = {
$set: null
};
return updateModel(spec);
};
return (0, $f5b828bbb980a05d$export$2e2bcd8739ae039)((0, $2QVk1$ErrorBoundary), null, (0, $f5b828bbb980a05d$export$2e2bcd8739ae039)("div.position-editor", [
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039)((0, $2QVk1$reactdraggable), {
handle: ".handle",
position: {
x: 0,
y: topHeight
},
onDrag: moveEntireNote,
axis: "y"
}, (0, $f5b828bbb980a05d$export$2e2bcd8739ae039)("div", [
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039)("div.handle", {
className: "handle",
style: {
height: height,
width: 2 * margin,
marginLeft: -margin,
marginTop: -margin,
position: "absolute"
}
})
])),
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039)($788eb3ac0fd4a0dc$var$PointHandle, {
height: noteHasSpan ? topHeight : topHeight - 15,
onDrag: moveTop,
className: (0, $2QVk1$classnames)("top-handle", {
"add-span-handle": !noteHasSpan
}),
bounds: {
bottom: bottomHeight
}
}),
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039)($788eb3ac0fd4a0dc$var$PointHandle, {
height: bottomHeight,
onDrag: moveBottom,
className: "bottom-handle",
bounds: noteHasSpan ? {
top: topHeight
} : null
})
]));
}
const $788eb3ac0fd4a0dc$var$NoteEditorUnderlay = function({ padding: padding }) {
const { width: width } = (0, $2QVk1$useContext)((0, $00c4b971e86fe1d8$export$20c7bffdb69233c9));
const { setEditingNote: setEditingNote } = (0, $2QVk1$useContext)($788eb3ac0fd4a0dc$export$cbc16735c48a2e0f);
return (0, $f5b828bbb980a05d$export$2e2bcd8739ae039)((0, $00c4b971e86fe1d8$export$b74b5a117fd60a1d), {
fill: "rgba(255,255,255,0.8)",
style: {
pointerEvents: "none"
},
className: "underlay"
});
};
const $788eb3ac0fd4a0dc$export$9939e67821493b95 = function(props) {
const { allowPositionEditing: allowPositionEditing } = props;
const { noteEditor: noteEditor } = (0, $2QVk1$useContext)($788eb3ac0fd4a0dc$export$cbc16735c48a2e0f);
const { notes: notes, nodes: nodes, elementHeights: elementHeights, createNodeForNote: createNodeForNote } = (0, $2QVk1$useContext)((0, $00c4b971e86fe1d8$export$20c7bffdb69233c9));
const { editedModel: editedModel } = (0, $2QVk1$useModelEditor)();
if (editedModel == null) return null;
const index = notes.indexOf(editedModel);
const { id: noteID } = editedModel;
let node = nodes[noteID] || createNodeForNote(editedModel);
const noteHeight = elementHeights[noteID] || 20;
if (editedModel.height != null) {
const newNode = createNodeForNote(editedModel);
// Set position of note to current position
newNode.currentPos = node.currentPos;
const pos = newNode.centerPos || newNode.idealPos;
const dy = pos - node.currentPos;
if (dy > 50) newNode.currentPos = pos - 50;
if (dy < -50) newNode.currentPos = pos + 50;
node = newNode;
}
return (0, $f5b828bbb980a05d$export$2e2bcd8739ae039)((0, $2QVk1$ErrorBoundary), [
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039)("g.note-editor.note", [
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039)($788eb3ac0fd4a0dc$var$NoteEditorUnderlay),
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039).if(!allowPositionEditing)((0, $dd4ef284e468ce5f$export$a05ee380fe56e446), {
note: editedModel
}),
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039).if(allowPositionEditing)($788eb3ac0fd4a0dc$var$EditableNoteConnector, {
note: editedModel,
node: node
}),
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039)((0, $dd4ef284e468ce5f$export$ae56508882661985), {
offsetY: node.currentPos,
noteHeight: noteHeight
}, [
(0, $f5b828bbb980a05d$export$2e2bcd8739ae039)(noteEditor, {
note: editedModel,
key: index
})
])
])
]);
};
export {$788eb3ac0fd4a0dc$export$cbc16735c48a2e0f as NoteEditorContext, $788eb3ac0fd4a0dc$export$f3c30e51e696113d as NoteTextEditor, $788eb3ac0fd4a0dc$export$63b2a30da318abf8 as NoteEditorProvider, $788eb3ac0fd4a0dc$export$9939e67821493b95 as NoteEditor};
//# sourceMappingURL=column-components.2126e2f4.js.map