diff --git a/spec/editor-component-spec.coffee b/spec/editor-component-spec.coffee index 1e5725464..e753272f6 100644 --- a/spec/editor-component-spec.coffee +++ b/spec/editor-component-spec.coffee @@ -1351,6 +1351,21 @@ describe "EditorComponent", -> wrapperView.show() expect(node.querySelector('.cursor').style['-webkit-transform']).toBe "translate3d(#{9 * charWidth}px, 0px, 0px)" + describe "when the editor component is resized", -> + it "updates the component based on a new size", -> + editor.setSoftWrap(true) + newHeight = 4 * editor.getLineHeightInPixels() + "px" + expect(newHeight).toBeLessThan node.style.height + node.style.height = newHeight + + advanceClock(component.scrollViewMeasurementInterval) + expect(node.querySelectorAll('.line')).toHaveLength(4 + lineOverdrawMargin + 1) + + gutterWidth = node.querySelector('.gutter').offsetWidth + node.style.width = gutterWidth + 14 * charWidth + 'px' + advanceClock(component.scrollViewMeasurementInterval) + expect(node.querySelector('.line').textContent).toBe "var quicksort " + buildMouseEvent = (type, properties...) -> properties = extend({bubbles: true, cancelable: true}, properties...) event = new MouseEvent(type, properties) diff --git a/src/editor-component.coffee b/src/editor-component.coffee index f8f94ea17..d9c96ac4a 100644 --- a/src/editor-component.coffee +++ b/src/editor-component.coffee @@ -37,6 +37,7 @@ EditorComponent = React.createClass scrollViewMeasurementRequested: false measureLineHeightAndDefaultCharWidthWhenShown: false inputEnabled: true + scrollViewMeasurementInterval: 100 render: -> {focused, fontSize, lineHeight, fontFamily, showIndentGuide, showInvisibles, visible} = @state @@ -150,6 +151,8 @@ EditorComponent = React.createClass componentDidMount: -> {editor} = @props + @scrollViewMeasurementIntervalId = setInterval(@requestScrollViewMeasurement, @scrollViewMeasurementInterval) + @observeEditor() @listenForDOMEvents() @listenForCommands() @@ -166,7 +169,8 @@ EditorComponent = React.createClass componentWillUnmount: -> @unsubscribe() - window.removeEventListener('resize', @onWindowResize) + clearInterval(@scrollViewMeasurementIntervalId) + @scrollViewMeasurementIntervalId = null componentWillUpdate: -> if @props.editor.isAlive() @@ -270,9 +274,8 @@ EditorComponent = React.createClass node.addEventListener 'textInput', @onTextInput scrollViewNode = @refs.scrollView.getDOMNode() - scrollViewNode.addEventListener 'overflowchanged', @onScrollViewOverflowChanged scrollViewNode.addEventListener 'scroll', @onScrollViewScroll - window.addEventListener('resize', @onWindowResize) + window.addEventListener 'resize', @requestScrollViewMeasurement listenForCommands: -> {parentView, editor, mini} = @props @@ -468,12 +471,6 @@ EditorComponent = React.createClass @pendingVerticalScrollDelta = 0 @pendingHorizontalScrollDelta = 0 - onScrollViewOverflowChanged: -> - @requestScrollViewMeasurement() - - onWindowResize: -> - @requestScrollViewMeasurement() - onScrollViewScroll: -> console.warn "EditorScrollView scroll position changed, and it shouldn't have. If you can reproduce this, please report it." scrollViewNode = @refs.scrollView.getDOMNode() @@ -610,13 +607,14 @@ EditorComponent = React.createClass {position} = getComputedStyle(editorNode) {width, height} = editorNode.style - if position is 'absolute' or height - clientHeight = scrollViewNode.clientHeight - editor.setHeight(clientHeight) if clientHeight > 0 + editor.batchUpdates -> + if position is 'absolute' or height + clientHeight = scrollViewNode.clientHeight + editor.setHeight(clientHeight) if clientHeight > 0 - if position is 'absolute' or width - clientWidth = scrollViewNode.clientWidth - editor.setWidth(clientWidth) if clientWidth > 0 + if position is 'absolute' or width + clientWidth = scrollViewNode.clientWidth + editor.setWidth(clientWidth) if clientWidth > 0 measureLineHeightAndCharWidthsIfNeeded: (prevState) -> if not isEqualForProperties(prevState, @state, 'lineHeight', 'fontSize', 'fontFamily')