1  class PaneResizeHandleElement extends HTMLElement
 2    createdCallback: ->
 3      @resizePane = @resizePane.bind(this)
 4      @resizeStopped = @resizeStopped.bind(this)
 5      @subscribeToDOMEvents()
 6  
 7    subscribeToDOMEvents: ->
 8      @addEventListener 'dblclick', @resizeToFitContent.bind(this)
 9      @addEventListener 'mousedown', @resizeStarted.bind(this)
10  
11    attachedCallback: ->
12      # For some reason Chromium 58 is firing the attached callback after the
13      # element has been detached, so we ignore the callback when a parent element
14      # can't be found.
15      if @parentElement
16        @isHorizontal = @parentElement.classList.contains("horizontal")
17        @classList.add if @isHorizontal then 'horizontal' else 'vertical'
18  
19    detachedCallback: ->
20      @resizeStopped()
21  
22    resizeToFitContent: ->
23      # clear flex-grow css style of both pane
24      @previousSibling?.model.setFlexScale(1)
25      @nextSibling?.model.setFlexScale(1)
26  
27    resizeStarted: (e) ->
28      e.stopPropagation()
29      document.addEventListener 'mousemove', @resizePane
30      document.addEventListener 'mouseup', @resizeStopped
31  
32    resizeStopped: ->
33      document.removeEventListener 'mousemove', @resizePane
34      document.removeEventListener 'mouseup', @resizeStopped
35  
36    calcRatio: (ratio1, ratio2, total) ->
37      allRatio = ratio1 + ratio2
38      [total * ratio1 / allRatio, total * ratio2 / allRatio]
39  
40    setFlexGrow: (prevSize, nextSize) ->
41      @prevModel = @previousSibling.model
42      @nextModel = @nextSibling.model
43      totalScale = @prevModel.getFlexScale() + @nextModel.getFlexScale()
44      flexGrows = @calcRatio(prevSize, nextSize, totalScale)
45      @prevModel.setFlexScale flexGrows[0]
46      @nextModel.setFlexScale flexGrows[1]
47  
48    fixInRange: (val, minValue, maxValue) ->
49      Math.min(Math.max(val, minValue), maxValue)
50  
51    resizePane: ({clientX, clientY, which}) ->
52      return @resizeStopped() unless which is 1
53      return @resizeStopped() unless @previousSibling? and @nextSibling?
54  
55      if @isHorizontal
56        totalWidth = @previousSibling.clientWidth + @nextSibling.clientWidth
57        #get the left and right width after move the resize view
58        leftWidth = clientX - @previousSibling.getBoundingClientRect().left
59        leftWidth = @fixInRange(leftWidth, 0, totalWidth)
60        rightWidth = totalWidth - leftWidth
61        # set the flex grow by the ratio of left width and right width
62        # to change pane width
63        @setFlexGrow(leftWidth, rightWidth)
64      else
65        totalHeight = @previousSibling.clientHeight + @nextSibling.clientHeight
66        topHeight = clientY - @previousSibling.getBoundingClientRect().top
67        topHeight = @fixInRange(topHeight, 0, totalHeight)
68        bottomHeight = totalHeight - topHeight
69        @setFlexGrow(topHeight, bottomHeight)
70  
71  module.exports = PaneResizeHandleElement =
72  document.registerElement 'atom-pane-resize-handle', prototype: PaneResizeHandleElement.prototype