From 713642d104d1cc0432aa29896dc564beab25ec82 Mon Sep 17 00:00:00 2001 From: eireland Date: Mon, 23 Dec 2024 22:01:51 -0800 Subject: [PATCH] PR Fixes Fixes editor behavior when formula overflows the input. --- .../components/common/edit-formula-modal.scss | 19 +++++++--- .../common/edit-formula-modal.scss.d.ts | 9 +++++ .../components/common/edit-formula-modal.tsx | 37 ++++++++++--------- v3/src/components/common/formula-editor.tsx | 8 +++- 4 files changed, 49 insertions(+), 24 deletions(-) create mode 100644 v3/src/components/common/edit-formula-modal.scss.d.ts diff --git a/v3/src/components/common/edit-formula-modal.scss b/v3/src/components/common/edit-formula-modal.scss index 32df5f91d..13727f07a 100644 --- a/v3/src/components/common/edit-formula-modal.scss +++ b/v3/src/components/common/edit-formula-modal.scss @@ -1,8 +1,18 @@ @use "../vars"; +$edit-formula-modal-min-height: 180; +$edit-formula-modal-min-height-px: #{$edit-formula-modal-min-height}px; +$edit-formula-modal-min-width: 400; +$edit-formula-modal-min-width-px: #{$edit-formula-modal-min-width}px; + +// https://mattferderer.com/use-sass-variables-in-typescript-and-javascript +:export { + editFormulaModalMinHeight: $edit-formula-modal-min-height; + editFormulaModalMinWidth: $edit-formula-modal-min-width; +} .codap-modal-content { - min-height: 180px; - min-width: 400px; + min-height: $edit-formula-modal-min-height-px; + min-width: $edit-formula-modal-min-width-px; .formula-modal-body { cursor: default; @@ -32,9 +42,8 @@ width: 100%; .formula-editor-input { - height: 100%; - width: 100%; - flex-grow: 1; + width: calc(100% - 50px); + .cm-editor { height: 100%; width: 100%; diff --git a/v3/src/components/common/edit-formula-modal.scss.d.ts b/v3/src/components/common/edit-formula-modal.scss.d.ts new file mode 100644 index 000000000..fc89d588b --- /dev/null +++ b/v3/src/components/common/edit-formula-modal.scss.d.ts @@ -0,0 +1,9 @@ +// https://mattferderer.com/use-sass-variables-in-typescript-and-javascript +export interface IEditFormulaModalShared { + editFormulaModalMinHeight: number + editFormulaModalMinWidth: number +} + +export const styles: IEditFormulaModalShared + +export default styles diff --git a/v3/src/components/common/edit-formula-modal.tsx b/v3/src/components/common/edit-formula-modal.tsx index ccb3e007f..b43c38fe6 100644 --- a/v3/src/components/common/edit-formula-modal.tsx +++ b/v3/src/components/common/edit-formula-modal.tsx @@ -1,5 +1,5 @@ import { - Box, Button, Flex, FormControl, FormLabel, Input, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, Tooltip + Box, Button, Flex, FormControl, FormLabel, Input, ModalBody, ModalFooter, Tooltip } from "@chakra-ui/react" import React, { useCallback, useEffect, useState } from "react" import { observer } from "mobx-react-lite" @@ -13,7 +13,7 @@ import { InsertFunctionMenu } from "./formula-insert-function-menu" import { InsertValuesMenu } from "./formula-insert-values-menu" import ResizeHandle from "../../assets/icons/icon-corner-resize-handle.svg" -import "./edit-formula-modal.scss" +import styles from './edit-formula-modal.scss' interface IProps { applyFormula: (formula: string) => void @@ -29,14 +29,19 @@ interface IProps { export const EditFormulaModal = observer(function EditFormulaModal({ applyFormula, formulaPrompt, isOpen, onClose, titleInput, titleLabel, titlePlaceholder, value }: IProps) { - const minWidth = 400 - const minHeight = 180 + const minWidth = +styles.editFormulaModalMinWidth + const minHeight = +styles.editFormulaModalMinHeight + const headerHeight = 36 + const footerHeight = 56 + const insertButtonsHeight = 35 + + const modalContentRef = React.useRef(null) const [showValuesMenu, setShowValuesMenu] = useState(false) const [showFunctionMenu, setShowFunctionMenu] = useState(false) const formulaEditorState = useFormulaEditorState(value ?? "") const { formula, setFormula } = formulaEditorState - const [dimension, setDimension] = useState({ width: minWidth, height: minHeight }) - + const [dimensions, setDimensions] = useState({ width: minWidth, height: minHeight }) + const editorHeight = dimensions.height - headerHeight - footerHeight - insertButtonsHeight useEffect(() => { setFormula(value || "") @@ -52,7 +57,7 @@ export const EditFormulaModal = observer(function EditFormulaModal({ setShowFunctionMenu(false) setFormula(value || "") onClose?.() - setDimension({ width: minWidth, height: minHeight }) + setDimensions({ width: minWidth, height: minHeight }) } const handleModalWhitespaceClick = () => { @@ -97,9 +102,9 @@ export const EditFormulaModal = observer(function EditFormulaModal({ e.currentTarget.setPointerCapture(e.pointerId) } - const modalRect = document.querySelector(".codap-modal-content")?.getBoundingClientRect() - const startWidth = modalRect?.width ?? dimension.width - const startHeight = modalRect?.height ?? dimension.height + const modalRect = modalContentRef.current?.getBoundingClientRect() + const startWidth = modalRect?.width ?? dimensions.width + const startHeight = modalRect?.height ?? dimensions.height const startPosition = {x: e.pageX, y: e.pageY} let resizingWidth = startWidth, resizingHeight = startHeight @@ -109,9 +114,7 @@ export const EditFormulaModal = observer(function EditFormulaModal({ const yDelta = pointerMoveEvent.pageY - startPosition.y resizingWidth = Math.max(startWidth + xDelta, minWidth) resizingHeight = Math.max(startHeight + yDelta, minHeight) - setDimension({ - width: resizingWidth, height: resizingHeight, - }) + setDimensions({width: Math.round(resizingWidth), height: Math.round(resizingHeight)}) } const onPointerUp = () => { document.body.removeEventListener("pointermove", onPointerMove, { capture: true }) @@ -119,15 +122,15 @@ export const EditFormulaModal = observer(function EditFormulaModal({ } document.body.addEventListener("pointermove", onPointerMove, { capture: true }) document.body.addEventListener("pointerup", onPointerUp, { capture: true }) - }, [dimension.height, dimension.width]) + }, [dimensions.height, dimensions.width, minHeight, minWidth]) return ( @@ -146,7 +149,7 @@ export const EditFormulaModal = observer(function EditFormulaModal({ {formulaPrompt ?? t("DG.AttrFormView.formulaPrompt")} - + diff --git a/v3/src/components/common/formula-editor.tsx b/v3/src/components/common/formula-editor.tsx index 923cdbccc..1bdb24ba8 100644 --- a/v3/src/components/common/formula-editor.tsx +++ b/v3/src/components/common/formula-editor.tsx @@ -19,6 +19,8 @@ import { formulaLanguageWithHighlighting } from "../../models/formula/lezer/form import { getGlobalValueManager, getSharedModelManager } from "../../models/tiles/tile-environment" import { FormulaEditorApi, useFormulaEditorContext } from "./formula-editor-context" +import styles from './edit-formula-modal.scss' + interface ICompletionOptions { attributes: boolean boundaries: boolean @@ -35,6 +37,7 @@ const kAllOptions: ICompletionOptions = { interface IProps { // options default to true if not specified options?: Partial + editorHeight?: number } /* @@ -255,7 +258,7 @@ function cmExtensionsSetup() { return extensions.filter(Boolean) } -export function FormulaEditor({ options: _options }: IProps) { +export function FormulaEditor({ options: _options, editorHeight = +styles.editFormulaModalMinHeight }: IProps) { const dataSet = useDataSetContext() const jsonOptions = JSON.stringify(_options ?? {}) const options = useMemo(() => JSON.parse(jsonOptions), [jsonOptions]) @@ -283,6 +286,7 @@ export function FormulaEditor({ options: _options }: IProps) { // .input-element indicates to CodapModal not to drag the modal from within the element const classes = "formula-editor-input input-element" return }