Add line and col display widget (#157)

* WIP add div element and onChange event for line:col widget * WIP set onChange event for cursor update * Competed line and col widget
hapifhir · Nov 20, 2023 · c0d5be8 · c0d5be8
1 parent d9e35ca
commit c0d5be8
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 2 deletions.
diff --git 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
@@ -23,5 +23,7 @@ external val aceEditor: ComponentClass<AceEditorProps>
     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
@@ -8,6 +8,12 @@ fun scrollTo(editorRef: RefObject<Nothing>, row: Int, column:Int) {
     editorRef.asDynamic().current.editor.centerSelection()
 }
 
+fun getCurson(editorRef: RefObject<Nothing>) : Pair<Int, Int> {
+   val point = editorRef.asDynamic().current.editor.getCursorPosition()
+    console.log("Point : " + point.row + ", " + point.column)
+    return Pair(point.row,point.column)
+}
+
 fun setAnnotations(editorRef: RefObject<Nothing>, aceAnnotations : Array<AceAnnotation>) {
     editorRef.asDynamic().current.editor.getSession().setAnnotations(aceAnnotations)
 }
diff --git 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
@@ -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<Nothing>
 }
 
+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<CodeIssueDisplayProps, State>() {
+class CodeIssueDisplay : RComponent<CodeIssueDisplayProps, CodeIssueDisplayState>() {
 
+    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<CodeIssueDisplayProps, State>() {
                 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())
         }
-
     }
 }