From f8f42265da2c3c9a8cbd51403ce263e1960740f3 Mon Sep 17 00:00:00 2001 From: liuxiong332 Date: Tue, 10 Mar 2015 17:02:34 +0800 Subject: [PATCH] delete PaneResizeHandleView that use jQuery and View and replaced with PaneResizeHandleElement --- src/pane-axis-element.coffee | 16 +++---- src/pane-resize-handle-element.coffee | 64 +++++++++++++++++++++++++ src/pane-resize-handle-view.coffee | 67 --------------------------- static/panes.less | 4 +- 4 files changed, 73 insertions(+), 78 deletions(-) create mode 100644 src/pane-resize-handle-element.coffee delete mode 100644 src/pane-resize-handle-view.coffee diff --git a/src/pane-axis-element.coffee b/src/pane-axis-element.coffee index 00304b65d..fc6ba2edb 100644 --- a/src/pane-axis-element.coffee +++ b/src/pane-axis-element.coffee @@ -1,6 +1,6 @@ {CompositeDisposable} = require 'event-kit' {callAttachHooks} = require './space-pen-extensions' -PaneResizeHandleView = require './pane-resize-handle-view' +PaneResizeHandleElement = require './pane-resize-handle-element' class PaneAxisElement extends HTMLElement createdCallback: -> @@ -24,7 +24,7 @@ class PaneAxisElement extends HTMLElement this isPaneResizeHandleElement: (element) -> - element?.classList.contains('pane-resize-handle') + element?.nodeName.toLowerCase() is 'atom-pane-resize-handle' childAdded: ({child, index}) -> view = atom.views.getView(child) @@ -33,16 +33,14 @@ class PaneAxisElement extends HTMLElement prevElement = view.previousSibling # if previous element is not pane resize element, then insert new resize element if prevElement? and not @isPaneResizeHandleElement(prevElement) - resizeView = new PaneResizeHandleView() - resizeView.initialize() - @insertBefore(resizeView[0], view) + resizeHandle = document.createElement('atom-pane-resize-handle') + @insertBefore(resizeHandle, view) nextElement = view.nextSibling # if next element isnot resize element, then insert new resize element if nextElement? and not @isPaneResizeHandleElement(nextElement) - resizeView = new PaneResizeHandleView() - resizeView.initialize() - @insertBefore(resizeView[0], nextElement) + resizeHandle = document.createElement('atom-pane-resize-handle') + @insertBefore(resizeHandle, nextElement) callAttachHooks(view) # for backward compatibility with SpacePen views @@ -50,7 +48,7 @@ class PaneAxisElement extends HTMLElement view = atom.views.getView(child) siblingView = view.previousSibling # make sure next sibling view is pane resize view - if siblingView?.classList.contains('pane-resize-handle') + if siblingView? and @isPaneResizeHandleElement(siblingView) siblingView.remove() view.remove() diff --git a/src/pane-resize-handle-element.coffee b/src/pane-resize-handle-element.coffee new file mode 100644 index 000000000..d04e3a93b --- /dev/null +++ b/src/pane-resize-handle-element.coffee @@ -0,0 +1,64 @@ +class PaneResizeHandleElement extends HTMLElement + createdCallback: -> + @resizePane = @resizePane.bind(this) + @resizeStopped = @resizeStopped.bind(this) + @subscribeToDOMEvents() + + subscribeToDOMEvents: -> + @addEventListener 'dblclick', @resizeToFitContent.bind(this) + @addEventListener 'mousedown', @resizeStarted.bind(this) + + attachedCallback: -> + @isHorizontal = @parentElement.classList.contains("horizontal") + + resizeToFitContent: -> + # clear flex-grow css style of both pane + @previousSibling.style.flexGrow = '' + @nextSibling.style.flexGrow = '' + + resizeStarted: (e)-> + e.stopPropagation() + document.addEventListener 'mousemove', @resizePane + document.addEventListener 'mouseup', @resizeStopped + + resizeStopped: -> + document.removeEventListener 'mousemove', @resizePane + document.removeEventListener 'mouseup', @resizeStopped + + calcRatio: (ratio1, ratio2, total) -> + allRatio = ratio1 + ratio2 + [total * ratio1 / allRatio, total * ratio2 / allRatio] + + getFlexGrow: (element) -> + parseFloat window.getComputedStyle(element).flexGrow + + setFlexGrow: (prevSize, nextSize) -> + flexGrow = @getFlexGrow(@previousSibling) + @getFlexGrow(@nextSibling) + flexGrows = @calcRatio(prevSize, nextSize, flexGrow) + @previousSibling.style.flexGrow = flexGrows[0] + @nextSibling.style.flexGrow = flexGrows[1] + + fixInRange: (val, minValue, maxValue) -> + Math.min(Math.max(val, minValue), maxValue) + + resizePane: ({clientX, clientY, which}) -> + return @resizeStopped() unless which is 1 + + if @isHorizontal + totalWidth = @previousSibling.clientWidth + @nextSibling.clientWidth + #get the left and right width after move the resize view + leftWidth = clientX - @previousSibling.getBoundingClientRect().left + leftWidth = @fixInRange(leftWidth, 0, totalWidth) + rightWidth = totalWidth - leftWidth + # set the flex grow by the ratio of left width and right width + # to change pane width + @setFlexGrow(leftWidth, rightWidth) + else + totalHeight = @previousSibling.clientHeight + @nextSibling.clientHeight + topHeight = clientY - @previousSibling.getBoundingClientRect().top + topHeight = @fixInRange(topHeight, 0, totalHeight) + bottomHeight = totalHeight - topHeight + @setFlexGrow(topHeight, bottomHeight) + +module.exports = PaneResizeHandleElement = +document.registerElement 'atom-pane-resize-handle', prototype: PaneResizeHandleElement.prototype diff --git a/src/pane-resize-handle-view.coffee b/src/pane-resize-handle-view.coffee deleted file mode 100644 index 0f8bfc51b..000000000 --- a/src/pane-resize-handle-view.coffee +++ /dev/null @@ -1,67 +0,0 @@ -{$, View} = require 'atom-space-pen-views' - -module.exports = -class PaneResizeHandleView extends View - @content: -> - @div class: 'pane-resize-handle' - - initialize: -> - @handleEvents() - - attached: -> - @isHorizontal = @parent().hasClass("horizontal") - - detached: -> - - handleEvents: -> - @on 'dblclick', => - @resizeToFitContent() - @on 'mousedown', (e) => - @resizeStarted(e) - - resizeToFitContent: -> - # clear flex-grow css style of both pane - @prev().css('flexGrow', '') - @next().css('flexGrow', '') - - resizeStarted: (e)-> - e.stopPropagation() - $(document).on('mousemove', @resizePane) - $(document).on('mouseup', @resizeStopped) - - calcRatio: (ratio1, ratio2, total) -> - allRatio = ratio1 + ratio2 - [total * ratio1 / allRatio, total * ratio2 / allRatio] - - getFlexGrow: (element) -> - parseFloat element.css('flexGrow') - - setFlexGrow: (prevSize, nextSize) -> - flexGrow = @getFlexGrow(@prev()) + @getFlexGrow(@next()) - flexGrows = @calcRatio(prevSize, nextSize, flexGrow) - @prev().css('flexGrow', flexGrows[0].toString()) - @next().css('flexGrow', flexGrows[1].toString()) - - fixInRange: (val, minValue, maxValue) -> - Math.min(Math.max(val, minValue), maxValue) - - resizePane: ({pageX, pageY, which}) => - return @resizeStopped() unless which is 1 - - if @isHorizontal - totalWidth = @prev().outerWidth() + @next().outerWidth() - #get the left and right width after move the resize view - leftWidth = @fixInRange(pageX - @prev().offset().left, 0, totalWidth) - rightWidth = totalWidth - leftWidth - # set the flex grow by the ratio of left width and right width - # to change pane width - @setFlexGrow(leftWidth, rightWidth) - else - totalHeight = @prev().outerHeight() + @next().outerHeight() - topHeight = @fixInRange(pageY - @prev().offset().top, 0, totalHeight) - bottomHeight = totalHeight - topHeight - @setFlexGrow(topHeight, bottomHeight) - - resizeStopped: => - $(document).off('mousemove', @resizePane) - $(document).off('mouseup', @resizeStopped) diff --git a/static/panes.less b/static/panes.less index f48224f61..ee09b8057 100644 --- a/static/panes.less +++ b/static/panes.less @@ -12,7 +12,7 @@ atom-pane-container { -webkit-flex: 1; -webkit-flex-direction: column; - & > div.pane-resize-handle { + & > atom-pane-resize-handle { height: 8px; z-index: 3; cursor: ns-resize; @@ -25,7 +25,7 @@ atom-pane-container { -webkit-flex: 1; -webkit-flex-direction: row; - & > div.pane-resize-handle { + & > atom-pane-resize-handle { width: 8px; z-index: 3; cursor: ew-resize;