Auto scrolling

Author: grantnelson-wf

playground/internal/react/codeBox.go

@@ -2,7 +2,6 @@ package react
 
 import (
 	"fmt"
-	"strconv"
 	"strings"
 
 	"github.com/gopherjs/gopherjs/js"
@@ -36,7 +35,7 @@ func codeBoxComponent(props Props) *Element {
 			CreateElement(`textarea`, Props{
 				`id`:       `line-nums`,
 				`ref`:      cba.lineNumsRef,
-				`value`:    cba.getLineNumbers(cba.curCode),
+				`value`:    cba.getLineNumbers(),
 				`readOnly`: true,
 				`disable`:  `true`,
 			}),
@@ -67,7 +66,6 @@ type codeBoxAssistant struct {
 func (cba *codeBoxAssistant) onInput(e *js.Object) {
 	code := e.Get(`target`).Get(`value`).String()
 	cba.setCode(code)
-	//cba.updateLineNumbers(code)
 }
 
 func (cba *codeBoxAssistant) onKeyDown(e *js.Object) {
@@ -77,15 +75,15 @@ func (cba *codeBoxAssistant) onKeyDown(e *js.Object) {
 }
 
 func (cba *codeBoxAssistant) onScroll(e *js.Object) {
-	scrollTop := e.Get("target").Get("scrollTop").Int()
-	println("curScrollTop:", scrollTop)
-	cba.lineNumsRef.Set("scrollTop", scrollTop)
+	scrollTop := e.Get(`target`).Get(`scrollTop`).Int()
+	cba.lineNumsRef.Set(`scrollTop`, scrollTop)
 }
 
 func (cba *codeBoxAssistant) handleKeyDown(keyCode int) bool {
 	toInsert := ``
 	switch keyCode {
 	case '\t':
+		// Insert tab character and prevent focus change.
 		toInsert = "\t"
 	case '\r':
 		toInsert = "\n"
@@ -131,12 +129,12 @@ func (cba *codeBoxAssistant) currentIndent(start int, code string) string {
 	return code[par:i]
 }
 
-func (cba *codeBoxAssistant) getLineNumbers(code string) string {
-	lines := strings.Count(code, "\n") + 1
-	size := len(fmt.Sprintf("%d", lines))
+func (cba *codeBoxAssistant) getLineNumbers() string {
+	lines := strings.Count(cba.curCode, "\n") + 1
+	size := len(fmt.Sprintf(`%d`, lines))
 	var sb strings.Builder
 	for i := 1; i <= lines; i++ {
-		sb.WriteString(fmt.Sprintf("%*d", size, i))
+		sb.WriteString(fmt.Sprintf(`%*d`, size, i))
 		if i < lines {
 			sb.WriteString("\n")
 		}
@@ -150,19 +148,6 @@ func (cba *codeBoxAssistant) getSelection() (int, int) {
 	return start, end
 }
 
-func (cba *codeBoxAssistant) getLineHeight() int {
-	style := js.Global.Get("window").Call("getComputedStyle", cba.textAreaRef.Current())
-	// Get line-height property (returns string like "15px")
-	lineHeightStr := style.Call("getPropertyValue", "line-height").String()
-	lineHeightStr = strings.TrimSuffix(lineHeightStr, "px")
-	lineHeight, err := strconv.Atoi(lineHeightStr)
-	if err != nil {
-		// Fallback to default if parsing fails (15px is about right for 11pt font)
-		return 15
-	}
-	return lineHeight
-}
-
 func (cba *codeBoxAssistant) setSelection(caret int, code string) {
 	// Pre-update the textarea value so that the caret and scroll can be set
 	// correctly before the next render so that the next render doesn't reset them.
@@ -173,20 +158,73 @@ func (cba *codeBoxAssistant) setSelection(caret int, code string) {
 	cba.textAreaRef.Set(`selectionEnd`, caret)
 
 	// Auto-scroll to keep caret in view.
-	curLineNum := strings.Count(code[:caret], "\n")
-	lineHeight := cba.getLineHeight()
-	scrollTop := curLineNum * lineHeight
+	cba.verticallyAutoScroll(caret, code)
+	cba.horizontallyAutoScroll(caret, code)
+}
+
+func (cba *codeBoxAssistant) verticallyAutoScroll(caret int, code string) {
+	totalHeight := cba.textAreaRef.Get(`scrollHeight`).Int()
+	visibleHeight := cba.textAreaRef.Get(`clientHeight`).Int()
+	if totalHeight <= visibleHeight {
+		return // No vertical scrolling needed.
+	}
 
-	curTop := cba.textAreaRef.Get("scrollTop").Int()
+	lineCount := strings.Count(code, "\n") + 1
+	curLine := strings.Count(code[:caret], "\n") + 1
+	scrollTop := int(float64(curLine) * float64(totalHeight) / float64(lineCount))
+
+	curTop := cba.textAreaRef.Get(`scrollTop`).Int()
 	if scrollTop < curTop {
-		cba.textAreaRef.Set("scrollTop", scrollTop)
-	} else {
-		height := cba.textAreaRef.Get("clientHeight").Int()
-		scrollTop = scrollTop - height + lineHeight
-
-		println("curLineNum:", curLineNum, "lineHeight:", lineHeight, "scrollTop:", scrollTop, "curTop:", curTop, "height:", height)
-		if scrollTop > curTop {
-			cba.textAreaRef.Set("scrollTop", scrollTop)
+		cba.textAreaRef.Set(`scrollTop`, scrollTop)
+	} else if scrollTop -= visibleHeight; scrollTop > curTop {
+		cba.textAreaRef.Set(`scrollTop`, scrollTop)
+	}
+}
+
+func (cba *codeBoxAssistant) horizontallyAutoScroll(caret int, code string) {
+	totalWidth := cba.textAreaRef.Get(`scrollWidth`).Int()
+	visibleWidth := cba.textAreaRef.Get(`clientWidth`).Int()
+	if totalWidth <= visibleWidth {
+		return // No horizontal scrolling needed.
+	}
+
+	longestLine := longestLineLength(code)
+	par := strings.LastIndex(code[:caret], "\n") + 1
+	curLine := measureLineLength(code[par:caret])
+	scrollLeft := int(float64(curLine) * float64(totalWidth) / float64(longestLine))
+
+	curLeft := cba.textAreaRef.Get(`scrollLeft`).Int()
+
+	println(fmt.Sprintf("HScroll: total=%d visible=%d longest=%d curLine=%d scrollLeft=%d curLeft=%d",
+		totalWidth, visibleWidth, longestLine, curLine, scrollLeft, curLeft))
+
+	if scrollLeft < curLeft {
+		cba.textAreaRef.Set(`scrollLeft`, scrollLeft)
+	} else if scrollLeft -= visibleWidth; scrollLeft > curLeft {
+		cba.textAreaRef.Set(`scrollLeft`, scrollLeft)
+	}
+}
+
+func measureLineLength(line string) int {
+	const tabWidth = 4
+	tabAdjust := strings.Count(line, "\t") * (tabWidth - 1)
+	return len(line) + tabAdjust
+}
+
+func longestLineLength(code string) int {
+	longest := 0
+	for {
+		index := strings.Index(code, "\n")
+		if index < 0 {
+			if length := measureLineLength(code); length > longest {
+				longest = length
+			}
+			break
+		}
+		if length := measureLineLength(code[:index]); length > longest {
+			longest = length
 		}
+		code = code[index+1:]
 	}
+	return longest
 }

playground/playground.css

@@ -66,6 +66,7 @@ pre,
 	padding: 0;
 	padding-left: 5px;
 	resize: none;
+	tab-size: 4;
 	white-space: nowrap;
 }