Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
xxadev
vscode
提交
cf86c78b
V
vscode
项目概览
xxadev
/
vscode
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vscode
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
cf86c78b
编写于
3月 23, 2016
作者:
A
Alex Dima
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Use FastDomNode for scrollbars
上级
bc6d7655
变更
6
显示空白变更内容
内联
并排
Showing
6 changed file
with
92 addition
and
50 deletion
+92
-50
src/vs/base/browser/styleMutator.ts
src/vs/base/browser/styleMutator.ts
+27
-0
src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts
src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts
+45
-29
src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts
src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts
+7
-8
src/vs/base/browser/ui/scrollbar/scrollableElement.ts
src/vs/base/browser/ui/scrollbar/scrollableElement.ts
+3
-2
src/vs/base/browser/ui/scrollbar/scrollableElementImpl.ts
src/vs/base/browser/ui/scrollbar/scrollableElementImpl.ts
+3
-3
src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts
src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts
+7
-8
未找到文件。
src/vs/base/browser/styleMutator.ts
浏览文件 @
cf86c78b
...
...
@@ -4,6 +4,8 @@
*--------------------------------------------------------------------------------------------*/
'
use strict
'
;
import
*
as
dom
from
'
vs/base/browser/dom
'
;
export
abstract
class
FastDomNode
{
private
_domNode
:
HTMLElement
;
...
...
@@ -16,7 +18,9 @@ export abstract class FastDomNode {
private
_right
:
number
;
private
_fontSize
:
number
;
private
_lineHeight
:
number
;
private
_className
:
string
;
private
_display
:
string
;
private
_position
:
string
;
private
_visibility
:
string
;
private
_transform
:
string
;
private
_lineNumber
:
string
;
...
...
@@ -36,7 +40,9 @@ export abstract class FastDomNode {
this
.
_right
=
-
1
;
this
.
_fontSize
=
-
1
;
this
.
_lineHeight
=
-
1
;
this
.
_className
=
''
;
this
.
_display
=
''
;
this
.
_position
=
''
;
this
.
_visibility
=
''
;
this
.
_transform
=
''
;
this
.
_lineNumber
=
''
;
...
...
@@ -114,6 +120,19 @@ export abstract class FastDomNode {
this
.
_domNode
.
style
.
lineHeight
=
this
.
_lineHeight
+
'
px
'
;
}
public
setClassName
(
className
:
string
):
void
{
if
(
this
.
_className
===
className
)
{
return
;
}
this
.
_className
=
className
;
this
.
_domNode
.
className
=
this
.
_className
;
}
public
toggleClassName
(
className
:
string
,
shouldHaveIt
?:
boolean
):
void
{
dom
.
toggleClass
(
this
.
_domNode
,
className
,
shouldHaveIt
);
this
.
_className
=
this
.
_domNode
.
className
;
}
public
setDisplay
(
display
:
string
):
void
{
if
(
this
.
_display
===
display
)
{
return
;
...
...
@@ -122,6 +141,14 @@ export abstract class FastDomNode {
this
.
_domNode
.
style
.
display
=
this
.
_display
;
}
public
setPosition
(
position
:
string
):
void
{
if
(
this
.
_position
===
position
)
{
return
;
}
this
.
_position
=
position
;
this
.
_domNode
.
style
.
position
=
this
.
_position
;
}
public
setVisibility
(
visibility
:
string
):
void
{
if
(
this
.
_visibility
===
visibility
)
{
return
;
...
...
src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts
浏览文件 @
cf86c78b
...
...
@@ -13,6 +13,7 @@ import {Disposable} from 'vs/base/common/lifecycle';
import
{
GlobalMouseMoveMonitor
,
IStandardMouseMoveEventData
,
standardMouseMoveMerger
}
from
'
vs/base/browser/globalMouseMoveMonitor
'
;
import
{
Widget
}
from
'
vs/base/browser/ui/widget
'
;
import
{
TimeoutTimer
,
IntervalTimer
}
from
'
vs/base/common/async
'
;
import
{
FastDomNode
,
createFastDomNode
}
from
'
vs/base/browser/styleMutator
'
;
/**
* The arrow image size.
...
...
@@ -72,16 +73,26 @@ export class ScrollbarState {
private
_computedSliderPosition
:
number
;
constructor
(
arrowSize
:
number
,
scrollbarSize
:
number
,
oppositeScrollbarSize
:
number
)
{
this
.
_scrollbarSize
=
Math
.
round
(
scrollbarSize
);
this
.
_oppositeScrollbarSize
=
Math
.
round
(
oppositeScrollbarSize
);
this
.
_arrowSize
=
Math
.
round
(
arrowSize
);
this
.
_visibleSize
=
0
;
this
.
_scrollSize
=
0
;
this
.
_scrollPosition
=
0
;
this
.
_scrollbarSize
=
scrollbarSize
;
this
.
_oppositeScrollbarSize
=
oppositeScrollbarSize
;
this
.
_arrowSize
=
arrowSize
;
this
.
_computedAvailableSize
=
0
;
this
.
_computedRepresentableSize
=
0
;
this
.
_computedRatio
=
0
;
this
.
_computedIsNeeded
=
false
;
this
.
_computedSliderSize
=
0
;
this
.
_computedSliderPosition
=
0
;
this
.
_refreshComputedValues
();
}
public
setVisibleSize
(
visibleSize
:
number
):
boolean
{
visibleSize
=
Math
.
round
(
visibleSize
);
if
(
this
.
_visibleSize
!==
visibleSize
)
{
this
.
_visibleSize
=
visibleSize
;
this
.
_refreshComputedValues
();
...
...
@@ -91,6 +102,7 @@ export class ScrollbarState {
}
public
setScrollSize
(
scrollSize
:
number
):
boolean
{
scrollSize
=
Math
.
round
(
scrollSize
);
if
(
this
.
_scrollSize
!==
scrollSize
)
{
this
.
_scrollSize
=
scrollSize
;
this
.
_refreshComputedValues
();
...
...
@@ -100,6 +112,7 @@ export class ScrollbarState {
}
public
setScrollPosition
(
scrollPosition
:
number
):
boolean
{
scrollPosition
=
Math
.
round
(
scrollPosition
);
if
(
this
.
_scrollPosition
!==
scrollPosition
)
{
this
.
_scrollPosition
=
scrollPosition
;
this
.
_refreshComputedValues
();
...
...
@@ -247,7 +260,7 @@ class VisibilityController extends Disposable {
private
_visibility
:
Visibility
;
private
_visibleClassName
:
string
;
private
_invisibleClassName
:
string
;
private
_domNode
:
HTMLElement
;
private
_domNode
:
FastDomNode
;
private
_shouldBeVisible
:
boolean
;
private
_isNeeded
:
boolean
;
private
_isVisible
:
boolean
;
...
...
@@ -293,9 +306,9 @@ class VisibilityController extends Disposable {
}
}
public
setDomNode
(
domNode
:
HTMLElement
):
void
{
public
setDomNode
(
domNode
:
FastDomNode
):
void
{
this
.
_domNode
=
domNode
;
this
.
_domNode
.
className
=
this
.
_invisibleClassName
;
this
.
_domNode
.
setClassName
(
this
.
_invisibleClassName
)
;
// Now that the flags & the dom node are in a consistent state, ensure the Hidden/Visible configuration
this
.
setShouldBeVisible
(
false
);
...
...
@@ -325,7 +338,7 @@ class VisibilityController extends Disposable {
// The CSS animation doesn't play otherwise
this
.
_revealTimer
.
setIfNotSet
(()
=>
{
this
.
_domNode
.
className
=
this
.
_visibleClassName
;
this
.
_domNode
.
setClassName
(
this
.
_visibleClassName
)
;
},
0
);
}
...
...
@@ -335,7 +348,7 @@ class VisibilityController extends Disposable {
return
;
}
this
.
_isVisible
=
false
;
this
.
_domNode
.
className
=
this
.
_invisibleClassName
+
(
withFadeAway
?
'
fade
'
:
''
);
this
.
_domNode
.
setClassName
(
this
.
_invisibleClassName
+
(
withFadeAway
?
'
fade
'
:
''
)
);
}
}
...
...
@@ -353,8 +366,8 @@ export abstract class AbstractScrollbar extends Widget implements IScrollbar {
private
_visibilityController
:
VisibilityController
;
private
_mouseMoveMonitor
:
GlobalMouseMoveMonitor
<
IStandardMouseMoveEventData
>
;
public
domNode
:
HTMLElement
;
public
slider
:
HTMLElement
;
public
domNode
:
FastDomNode
;
public
slider
:
FastDomNode
;
constructor
(
forbidTranslate3dUse
:
boolean
,
parent
:
IParent
,
scrollbarState
:
ScrollbarState
,
visibility
:
Visibility
,
extraScrollbarClassName
:
string
)
{
super
();
...
...
@@ -371,16 +384,16 @@ export abstract class AbstractScrollbar extends Widget implements IScrollbar {
* Creates the container dom node for the scrollbar & hooks up the events
*/
protected
_createDomNode
():
void
{
this
.
domNode
=
document
.
createElement
(
'
div
'
);
this
.
domNode
=
createFastDomNode
(
document
.
createElement
(
'
div
'
)
);
if
(
!
this
.
_forbidTranslate3dUse
&&
Browser
.
canUseTranslate3d
)
{
// Put the
worker reporte
r in its own layer
this
.
domNode
.
s
tyle
.
transform
=
'
translate3d(0px, 0px, 0px)
'
;
// Put the
scrollba
r in its own layer
this
.
domNode
.
s
etTransform
(
'
translate3d(0px, 0px, 0px)
'
)
;
}
this
.
_visibilityController
.
setDomNode
(
this
.
domNode
);
this
.
domNode
.
s
tyle
.
position
=
'
absolute
'
;
this
.
domNode
.
s
etPosition
(
'
absolute
'
)
;
this
.
onmousedown
(
this
.
domNode
,
(
e
)
=>
this
.
_domNodeMouseDown
(
e
));
this
.
onmousedown
(
this
.
domNode
.
domNode
,
(
e
)
=>
this
.
_domNodeMouseDown
(
e
));
}
/**
...
...
@@ -388,22 +401,25 @@ export abstract class AbstractScrollbar extends Widget implements IScrollbar {
*/
protected
_createArrow
(
className
:
string
,
top
:
number
,
left
:
number
,
bottom
:
number
,
right
:
number
,
bgWidth
:
number
,
bgHeight
:
number
,
mouseWheelEventFactory
:
IMouseWheelEventFactory
):
void
{
let
arrow
=
this
.
_register
(
new
ScrollbarArrow
(
className
,
top
,
left
,
bottom
,
right
,
bgWidth
,
bgHeight
,
mouseWheelEventFactory
,
this
.
_parent
));
this
.
domNode
.
appendChild
(
arrow
.
bgDomNode
);
this
.
domNode
.
appendChild
(
arrow
.
domNode
);
this
.
domNode
.
domNode
.
appendChild
(
arrow
.
bgDomNode
);
this
.
domNode
.
domNode
.
appendChild
(
arrow
.
domNode
);
}
/**
* Creates the slider dom node, adds it to the container & hooks up the events
*/
protected
_createSlider
(
top
:
number
,
left
:
number
,
width
:
number
,
height
:
number
):
void
{
this
.
slider
=
document
.
createElement
(
'
div
'
);
this
.
slider
.
className
=
'
slider
'
;
this
.
slider
.
style
.
position
=
'
absolute
'
;
setPosition
(
this
.
slider
,
top
,
left
,
null
,
null
);
setSize
(
this
.
slider
,
width
,
height
);
this
.
domNode
.
appendChild
(
this
.
slider
);
this
.
slider
=
createFastDomNode
(
document
.
createElement
(
'
div
'
));
this
.
slider
.
setClassName
(
'
slider
'
);
this
.
slider
.
setPosition
(
'
absolute
'
);
this
.
slider
.
setTop
(
top
);
this
.
slider
.
setLeft
(
left
);
this
.
slider
.
setWidth
(
width
);
this
.
slider
.
setHeight
(
height
);
this
.
domNode
.
domNode
.
appendChild
(
this
.
slider
.
domNode
);
this
.
onmousedown
(
this
.
slider
,
(
e
)
=>
this
.
_sliderMouseDown
(
e
));
this
.
onmousedown
(
this
.
slider
.
domNode
,
(
e
)
=>
this
.
_sliderMouseDown
(
e
));
}
// ----------------- Update state
...
...
@@ -447,7 +463,7 @@ export abstract class AbstractScrollbar extends Widget implements IScrollbar {
// ----------------- DOM events
private
_domNodeMouseDown
(
e
:
IMouseEvent
):
void
{
if
(
e
.
target
!==
this
.
domNode
)
{
if
(
e
.
target
!==
this
.
domNode
.
domNode
)
{
return
;
}
this
.
_onMouseDown
(
e
);
...
...
@@ -455,7 +471,7 @@ export abstract class AbstractScrollbar extends Widget implements IScrollbar {
public
delegateMouseDown
(
browserEvent
:
MouseEvent
):
void
{
let
e
=
new
StandardMouseEvent
(
browserEvent
);
let
domTop
=
this
.
domNode
.
getClientRects
()[
0
].
top
;
let
domTop
=
this
.
domNode
.
domNode
.
getClientRects
()[
0
].
top
;
let
sliderStart
=
domTop
+
this
.
_scrollbarState
.
getSliderPosition
();
let
sliderStop
=
domTop
+
this
.
_scrollbarState
.
getSliderPosition
()
+
this
.
_scrollbarState
.
getSliderSize
();
let
mousePos
=
this
.
_sliderMousePosition
(
e
);
...
...
@@ -469,7 +485,7 @@ export abstract class AbstractScrollbar extends Widget implements IScrollbar {
}
private
_onMouseDown
(
e
:
IMouseEvent
):
void
{
let
domNodePosition
=
DomUtils
.
getDomNodePosition
(
this
.
domNode
);
let
domNodePosition
=
DomUtils
.
getDomNodePosition
(
this
.
domNode
.
domNode
);
let
desiredSliderPosition
=
this
.
_mouseDownRelativePosition
(
e
,
domNodePosition
)
-
this
.
_scrollbarState
.
getArrowSize
()
-
this
.
_scrollbarState
.
getSliderSize
()
/
2
;
this
.
setDesiredScrollPosition
(
this
.
_scrollbarState
.
convertSliderPositionToScrollPosition
(
desiredSliderPosition
));
this
.
_sliderMouseDown
(
e
);
...
...
@@ -480,7 +496,7 @@ export abstract class AbstractScrollbar extends Widget implements IScrollbar {
let
initialMouseOrthogonalPosition
=
this
.
_sliderOrthogonalMousePosition
(
e
);
let
initialScrollPosition
=
this
.
_getScrollPosition
();
let
draggingDelta
=
this
.
_sliderMousePosition
(
e
)
-
this
.
_scrollbarState
.
getSliderPosition
();
DomUtils
.
toggleClass
(
this
.
slider
,
'
active
'
,
true
);
this
.
slider
.
toggleClassName
(
'
active
'
,
true
);
this
.
_mouseMoveMonitor
.
startMonitoring
(
standardMouseMoveMerger
,
...
...
@@ -497,7 +513,7 @@ export abstract class AbstractScrollbar extends Widget implements IScrollbar {
}
},
()
=>
{
DomUtils
.
toggleClass
(
this
.
slider
,
'
active
'
,
false
);
this
.
slider
.
toggleClassName
(
'
active
'
,
false
);
this
.
_parent
.
onDragEnd
();
}
);
...
...
src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts
浏览文件 @
cf86c78b
...
...
@@ -10,7 +10,6 @@ import {IMouseEvent, StandardMouseWheelEvent} from 'vs/base/browser/mouseEvent';
import
{
IDomNodePosition
}
from
'
vs/base/browser/dom
'
;
import
{
IParent
,
IScrollableElementOptions
,
Visibility
}
from
'
vs/base/browser/ui/scrollbar/scrollableElement
'
;
import
{
IScrollable
}
from
'
vs/base/common/scrollable
'
;
import
{
StyleMutator
}
from
'
vs/base/browser/styleMutator
'
;
export
class
HorizontalScrollbar
extends
AbstractScrollbar
{
...
...
@@ -42,19 +41,19 @@ export class HorizontalScrollbar extends AbstractScrollbar {
}
protected
_updateSlider
(
sliderSize
:
number
,
sliderPosition
:
number
):
void
{
StyleMutator
.
setWidth
(
this
.
slider
,
sliderSize
);
this
.
slider
.
setWidth
(
sliderSize
);
if
(
!
this
.
_forbidTranslate3dUse
&&
Browser
.
canUseTranslate3d
)
{
StyleMutator
.
setTransform
(
this
.
slider
,
'
translate3d(
'
+
sliderPosition
+
'
px, 0px, 0px)
'
);
this
.
slider
.
setTransform
(
'
translate3d(
'
+
sliderPosition
+
'
px, 0px, 0px)
'
);
}
else
{
StyleMutator
.
setLeft
(
this
.
slider
,
sliderPosition
);
this
.
slider
.
setLeft
(
sliderPosition
);
}
}
protected
_renderDomNode
(
largeSize
:
number
,
smallSize
:
number
):
void
{
StyleMutator
.
setWidth
(
this
.
domNode
,
largeSize
);
StyleMutator
.
setHeight
(
this
.
domNode
,
smallSize
);
StyleMutator
.
setLeft
(
this
.
domNode
,
0
);
StyleMutator
.
setBottom
(
this
.
domNode
,
0
);
this
.
domNode
.
setWidth
(
largeSize
);
this
.
domNode
.
setHeight
(
smallSize
);
this
.
domNode
.
setLeft
(
0
);
this
.
domNode
.
setBottom
(
0
);
}
protected
_mouseDownRelativePosition
(
e
:
IMouseEvent
,
domNodePosition
:
IDomNodePosition
):
number
{
...
...
src/vs/base/browser/ui/scrollbar/scrollableElement.ts
浏览文件 @
cf86c78b
...
...
@@ -5,6 +5,7 @@
'
use strict
'
;
import
{
IScrollable
}
from
'
vs/base/common/scrollable
'
;
import
{
FastDomNode
}
from
'
vs/base/browser/styleMutator
'
;
export
interface
IScrollableElementCreationOptions
{
/**
...
...
@@ -185,9 +186,9 @@ export interface IMouseWheelEvent {
}
export
interface
IScrollbar
{
domNode
:
HTMLElement
;
domNode
:
FastDomNode
;
dispose
():
void
;
slider
:
HTMLElement
;
slider
:
FastDomNode
;
onElementSize
(
size
:
number
):
void
;
onElementScrollSize
(
scrollSize
:
number
):
void
;
onElementScrollPosition
(
scrollPosition
:
number
):
void
;
...
...
src/vs/base/browser/ui/scrollbar/scrollableElementImpl.ts
浏览文件 @
cf86c78b
...
...
@@ -74,8 +74,8 @@ export class ScrollableElement extends Widget implements IScrollableElement {
this
.
_domNode
.
style
.
position
=
'
relative
'
;
this
.
_domNode
.
style
.
overflow
=
'
hidden
'
;
this
.
_domNode
.
appendChild
(
this
.
_originalElement
);
this
.
_domNode
.
appendChild
(
this
.
_horizontalScrollbar
.
domNode
);
this
.
_domNode
.
appendChild
(
this
.
_verticalScrollbar
.
domNode
);
this
.
_domNode
.
appendChild
(
this
.
_horizontalScrollbar
.
domNode
.
domNode
);
this
.
_domNode
.
appendChild
(
this
.
_verticalScrollbar
.
domNode
.
domNode
);
if
(
this
.
_options
.
useShadows
)
{
this
.
_leftShadowDomNode
=
document
.
createElement
(
'
div
'
);
...
...
@@ -126,7 +126,7 @@ export class ScrollableElement extends Widget implements IScrollableElement {
public
getOverviewRulerLayoutInfo
():
IOverviewRulerLayoutInfo
{
return
{
parent
:
this
.
_domNode
,
insertBefore
:
this
.
_verticalScrollbar
.
domNode
,
insertBefore
:
this
.
_verticalScrollbar
.
domNode
.
domNode
,
};
}
...
...
src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts
浏览文件 @
cf86c78b
...
...
@@ -10,7 +10,6 @@ import {IMouseEvent, StandardMouseWheelEvent} from 'vs/base/browser/mouseEvent';
import
{
IDomNodePosition
}
from
'
vs/base/browser/dom
'
;
import
{
IParent
,
IScrollableElementOptions
,
Visibility
}
from
'
vs/base/browser/ui/scrollbar/scrollableElement
'
;
import
{
IScrollable
}
from
'
vs/base/common/scrollable
'
;
import
{
StyleMutator
}
from
'
vs/base/browser/styleMutator
'
;
export
class
VerticalScrollbar
extends
AbstractScrollbar
{
...
...
@@ -43,19 +42,19 @@ export class VerticalScrollbar extends AbstractScrollbar {
}
protected
_updateSlider
(
sliderSize
:
number
,
sliderPosition
:
number
):
void
{
StyleMutator
.
setHeight
(
this
.
slider
,
sliderSize
);
this
.
slider
.
setHeight
(
sliderSize
);
if
(
!
this
.
_forbidTranslate3dUse
&&
Browser
.
canUseTranslate3d
)
{
StyleMutator
.
setTransform
(
this
.
slider
,
'
translate3d(0px,
'
+
sliderPosition
+
'
px, 0px)
'
);
this
.
slider
.
setTransform
(
'
translate3d(0px,
'
+
sliderPosition
+
'
px, 0px)
'
);
}
else
{
StyleMutator
.
setTop
(
this
.
slider
,
sliderPosition
);
this
.
slider
.
setTop
(
sliderPosition
);
}
}
protected
_renderDomNode
(
largeSize
:
number
,
smallSize
:
number
):
void
{
StyleMutator
.
setWidth
(
this
.
domNode
,
smallSize
);
StyleMutator
.
setHeight
(
this
.
domNode
,
largeSize
);
StyleMutator
.
setRight
(
this
.
domNode
,
0
);
StyleMutator
.
setTop
(
this
.
domNode
,
0
);
this
.
domNode
.
setWidth
(
smallSize
);
this
.
domNode
.
setHeight
(
largeSize
);
this
.
domNode
.
setRight
(
0
);
this
.
domNode
.
setTop
(
0
);
}
protected
_mouseDownRelativePosition
(
e
:
IMouseEvent
,
domNodePosition
:
IDomNodePosition
):
number
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录