diff --git a/src/jsMain/kotlin/css/text/TextStyle.kt b/src/jsMain/kotlin/css/text/TextStyle.kt index 32ea4629..d140c0ac 100644 --- a/src/jsMain/kotlin/css/text/TextStyle.kt +++ b/src/jsMain/kotlin/css/text/TextStyle.kt @@ -117,6 +117,13 @@ object TextStyle : StyleSheet("Tabs", isStatic = true) { color = TEXT_BLACK } + val editorLineAndCol by css { + fontFamily = FONT_FAMILY_CODE + fontSize = 10.pt + fontWeight = FontWeight.w300 + color = LINE_NUMBER_GRAY + } + val manualEntryFailMessage by css { fontFamily = FONT_FAMILY_MAIN fontSize = 12.pt diff --git a/src/jsMain/kotlin/ui/components/ace/ReactAce.kt b/src/jsMain/kotlin/ui/components/ace/ReactAce.kt index 4a0359ad..6ba6236f 100644 --- a/src/jsMain/kotlin/ui/components/ace/ReactAce.kt +++ b/src/jsMain/kotlin/ui/components/ace/ReactAce.kt @@ -23,5 +23,7 @@ external val aceEditor: ComponentClass var defaultValue : String? var value : String? var setOptions : AceOptions + + var onCursorChange : () -> Unit } diff --git a/src/jsMain/kotlin/ui/components/ace/ReactAceHelper.kt b/src/jsMain/kotlin/ui/components/ace/ReactAceHelper.kt index 1037b253..be8425ac 100644 --- a/src/jsMain/kotlin/ui/components/ace/ReactAceHelper.kt +++ b/src/jsMain/kotlin/ui/components/ace/ReactAceHelper.kt @@ -8,6 +8,12 @@ fun scrollTo(editorRef: RefObject, row: Int, column:Int) { editorRef.asDynamic().current.editor.centerSelection() } +fun getCurson(editorRef: RefObject) : Pair { + val point = editorRef.asDynamic().current.editor.getCursorPosition() + console.log("Point : " + point.row + ", " + point.column) + return Pair(point.row,point.column) +} + fun setAnnotations(editorRef: RefObject, aceAnnotations : Array) { editorRef.asDynamic().current.editor.getSession().setAnnotations(aceAnnotations) } \ No newline at end of file diff --git a/src/jsMain/kotlin/ui/components/validation/FileValidationOutcome.kt b/src/jsMain/kotlin/ui/components/validation/FileValidationOutcome.kt index 62c9a784..7369fbd5 100644 --- a/src/jsMain/kotlin/ui/components/validation/FileValidationOutcome.kt +++ b/src/jsMain/kotlin/ui/components/validation/FileValidationOutcome.kt @@ -122,6 +122,7 @@ object FileValidationOutcomeStyle : StyleSheet("FileValidationOutcomeStyle", isS borderStyle = BorderStyle.solid borderWidth = 1.px minHeight = 98.pct + position = Position.relative media(query = "(min-width: 1200px) and (orientation:landscape)", block = ruleSet { marginBottom = 0.px diff --git a/src/jsMain/kotlin/ui/components/validation/codeissuedisplay/CodeIssueDisplay.kt b/src/jsMain/kotlin/ui/components/validation/codeissuedisplay/CodeIssueDisplay.kt index dca434cb..7c9fe253 100644 --- a/src/jsMain/kotlin/ui/components/validation/codeissuedisplay/CodeIssueDisplay.kt +++ b/src/jsMain/kotlin/ui/components/validation/codeissuedisplay/CodeIssueDisplay.kt @@ -1,6 +1,8 @@ package ui.components.validation.codeissuedisplay import css.* +import css.text.TextStyle +import emotion.css.css import ui.components.ace.aceEditor import kotlinx.css.* @@ -11,10 +13,14 @@ import model.ValidationMessage import model.ValidationOutcome import react.* import styled.StyleSheet +import styled.css +import styled.styledDiv import ui.components.ace.AceAnnotation import ui.components.ace.AceMarker import ui.components.ace.AceOptions import ui.components.ace.setAnnotations +import ui.components.ace.getCurson +import ui.components.buttons.ToggleButtonState external interface CodeIssueDisplayProps : Props { var validationOutcome: ValidationOutcome @@ -24,6 +30,11 @@ external interface CodeIssueDisplayProps : Props { var editorRef:RefObject } +class CodeIssueDisplayState : State { + var line: Int = 0 + var col: Int = 0; +} + fun issueSeverityToAceAnnotation(issueSeverity: IssueSeverity): String { return when (issueSeverity) { IssueSeverity.FATAL -> "error" @@ -51,8 +62,11 @@ fun fileTypeToAceMode(fileType : String?) : String { return fileType } -class CodeIssueDisplay : RComponent() { +class CodeIssueDisplay : RComponent() { + init { + state = CodeIssueDisplayState() + } /* This is here because the annotations set in the aceEditor props will get blown away when the text content changes. So, with every @@ -99,9 +113,26 @@ class CodeIssueDisplay : RComponent() { value = props.validationOutcome.getFileInfo().fileContent setOptions = AceOptions(false) markers = aceMarkers + onCursorChange = { + val cursor = getCurson(props.editorRef) + setState { + line = cursor.first + col = cursor.second + } + } + } + } + + styledDiv { + css { + position = Position.absolute + zIndex = 1; + right = 16.px + bottom = 16.px + +TextStyle.editorLineAndCol } + + ((state.line + 1).toString() + ":" + (state.col + 1).toString()) } - } }