Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
xxadev
vscode
提交
119513fb
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,发现更多精彩内容 >>
提交
119513fb
编写于
7月 07, 2017
作者:
S
Sandeep Somavarapu
提交者:
GitHub
7月 07, 2017
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #30197 from Microsoft/sandy081/viewsDragAndDrop
Support reordering of views in split view by drag and drop
上级
90a99c7b
788f2602
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
143 addition
and
11 deletion
+143
-11
src/vs/base/browser/ui/splitview/splitview.ts
src/vs/base/browser/ui/splitview/splitview.ts
+133
-7
src/vs/workbench/parts/views/browser/views.ts
src/vs/workbench/parts/views/browser/views.ts
+10
-4
未找到文件。
src/vs/base/browser/ui/splitview/splitview.ts
浏览文件 @
119513fb
...
...
@@ -29,6 +29,7 @@ export enum ViewSizing {
export
interface
IOptions
{
orientation
?:
Orientation
;
// default Orientation.VERTICAL
canChangeOrderByDragAndDrop
?:
boolean
;
}
export
interface
ISashEvent
{
...
...
@@ -48,6 +49,7 @@ export interface IView extends ee.IEventEmitter {
fixedSize
:
number
;
minimumSize
:
number
;
maximumSize
:
number
;
draggableElement
:
HTMLElement
;
render
(
container
:
HTMLElement
,
orientation
:
Orientation
):
void
;
layout
(
size
:
number
,
orientation
:
Orientation
):
void
;
focus
():
void
;
...
...
@@ -70,6 +72,7 @@ export abstract class View extends ee.EventEmitter implements IView {
protected
_sizing
:
ViewSizing
;
protected
_fixedSize
:
number
;
protected
_minimumSize
:
number
;
protected
_draggableElement
:
HTMLElement
=
null
;
constructor
(
opts
:
IViewOptions
)
{
super
();
...
...
@@ -84,6 +87,7 @@ export abstract class View extends ee.EventEmitter implements IView {
get
fixedSize
():
number
{
return
this
.
_fixedSize
;
}
get
minimumSize
():
number
{
return
this
.
sizing
===
ViewSizing
.
Fixed
?
this
.
fixedSize
:
this
.
_minimumSize
;
}
get
maximumSize
():
number
{
return
this
.
sizing
===
ViewSizing
.
Fixed
?
this
.
fixedSize
:
Number
.
POSITIVE_INFINITY
;
}
get
draggableElement
():
HTMLElement
{
return
this
.
_draggableElement
;
}
protected
setFlexible
(
size
?:
number
):
void
{
this
.
_sizing
=
ViewSizing
.
Flexible
;
...
...
@@ -165,6 +169,7 @@ export abstract class HeaderView extends View {
render
(
container
:
HTMLElement
,
orientation
:
Orientation
):
void
{
this
.
header
=
document
.
createElement
(
'
div
'
);
this
.
header
.
className
=
'
header
'
;
this
.
_draggableElement
=
this
.
header
;
let
headerSize
=
this
.
headerSize
+
'
px
'
;
...
...
@@ -476,10 +481,15 @@ function sum(arr: number[]): number {
return
arr
.
reduce
((
a
,
b
)
=>
a
+
b
);
}
export
class
SplitView
implements
export
interface
SplitViewStyles
{
dropBackground
?:
Color
;
}
export
class
SplitView
extends
lifecycle
.
Disposable
implements
sash
.
IHorizontalSashLayoutProvider
,
sash
.
IVerticalSashLayoutProvider
{
private
orientation
:
Orientation
;
private
canDragAndDrop
:
boolean
;
private
el
:
HTMLElement
;
private
size
:
number
;
private
viewElements
:
HTMLElement
[];
...
...
@@ -488,6 +498,7 @@ export class SplitView implements
private
viewFocusPreviousListeners
:
lifecycle
.
IDisposable
[];
private
viewFocusNextListeners
:
lifecycle
.
IDisposable
[];
private
viewFocusListeners
:
lifecycle
.
IDisposable
[];
private
viewDnDListeners
:
lifecycle
.
IDisposable
[][];
private
initialWeights
:
number
[];
private
sashOrientation
:
sash
.
Orientation
;
private
sashes
:
sash
.
Sash
[];
...
...
@@ -496,13 +507,22 @@ export class SplitView implements
private
layoutViewElement
:
(
viewElement
:
HTMLElement
,
size
:
number
)
=>
void
;
private
eventWrapper
:
(
event
:
sash
.
ISashEvent
)
=>
ISashEvent
;
private
animationTimeout
:
number
;
private
_onFocus
:
Emitter
<
IView
>
;
private
state
:
IState
;
private
draggedView
:
IView
;
private
dropBackground
:
Color
;
private
_onFocus
:
Emitter
<
IView
>
=
this
.
_register
(
new
Emitter
<
IView
>
());
readonly
onFocus
:
Event
<
IView
>
=
this
.
_onFocus
.
event
;
private
_onDidOrderChange
:
Emitter
<
void
>
=
this
.
_register
(
new
Emitter
<
void
>
());
readonly
onDidOrderChange
:
Event
<
void
>
=
this
.
_onDidOrderChange
.
event
;
constructor
(
container
:
HTMLElement
,
options
?:
IOptions
)
{
super
();
options
=
options
||
{};
this
.
orientation
=
types
.
isUndefined
(
options
.
orientation
)
?
Orientation
.
VERTICAL
:
options
.
orientation
;
this
.
canDragAndDrop
=
!!
options
.
canChangeOrderByDragAndDrop
;
this
.
el
=
document
.
createElement
(
'
div
'
);
dom
.
addClass
(
this
.
el
,
'
monaco-split-view
'
);
...
...
@@ -516,11 +536,11 @@ export class SplitView implements
this
.
viewFocusPreviousListeners
=
[];
this
.
viewFocusNextListeners
=
[];
this
.
viewFocusListeners
=
[];
this
.
viewDnDListeners
=
[];
this
.
initialWeights
=
[];
this
.
sashes
=
[];
this
.
sashesListeners
=
[];
this
.
animationTimeout
=
null
;
this
.
_onFocus
=
new
Emitter
<
IView
>
();
this
.
sashOrientation
=
this
.
orientation
===
Orientation
.
VERTICAL
?
sash
.
Orientation
.
HORIZONTAL
...
...
@@ -540,10 +560,6 @@ export class SplitView implements
this
.
addView
(
new
VoidView
(),
1
,
0
);
}
get
onFocus
():
Event
<
IView
>
{
return
this
.
_onFocus
.
event
;
}
getViews
<
T
extends
IView
>
():
T
[]
{
return
<
T
[]
>
this
.
views
.
slice
(
0
,
this
.
views
.
length
-
1
);
}
...
...
@@ -579,6 +595,9 @@ export class SplitView implements
this
.
el
.
insertBefore
(
viewElement
,
this
.
el
.
children
.
item
(
index
));
}
// Listen to Drag and Drop
this
.
viewDnDListeners
[
index
]
=
this
.
listenToDragAndDrop
(
view
,
viewElement
);
// Add sash
if
(
this
.
views
.
length
>
2
)
{
let
s
=
new
sash
.
Sash
(
this
.
el
,
this
,
{
orientation
:
this
.
sashOrientation
});
...
...
@@ -636,6 +655,9 @@ export class SplitView implements
this
.
viewFocusNextListeners
[
index
].
dispose
();
this
.
viewFocusNextListeners
.
splice
(
index
,
1
);
lifecycle
.
dispose
(
this
.
viewDnDListeners
[
index
]);
this
.
viewDnDListeners
.
splice
(
index
,
1
);
this
.
views
.
splice
(
index
,
1
);
this
.
initialWeights
.
splice
(
index
,
1
);
this
.
el
.
removeChild
(
this
.
viewElements
[
index
]);
...
...
@@ -672,6 +694,108 @@ export class SplitView implements
this
.
layoutViews
();
}
style
(
styles
:
SplitViewStyles
):
void
{
this
.
dropBackground
=
styles
.
dropBackground
;
}
private
listenToDragAndDrop
(
view
:
IView
,
viewElement
:
HTMLElement
):
lifecycle
.
IDisposable
[]
{
if
(
!
this
.
canDragAndDrop
||
view
instanceof
VoidView
)
{
return
[];
}
const
disposables
:
lifecycle
.
IDisposable
[]
=
[];
// Allow to drag
if
(
view
.
draggableElement
)
{
view
.
draggableElement
.
draggable
=
true
;
disposables
.
push
(
dom
.
addDisposableListener
(
view
.
draggableElement
,
dom
.
EventType
.
DRAG_START
,
(
e
:
DragEvent
)
=>
{
e
.
dataTransfer
.
effectAllowed
=
'
move
'
;
this
.
draggedView
=
view
;
}));
}
// Drag enter
let
counter
=
0
;
// see https://github.com/Microsoft/vscode/issues/14470
disposables
.
push
(
dom
.
addDisposableListener
(
viewElement
,
dom
.
EventType
.
DRAG_ENTER
,
(
e
:
DragEvent
)
=>
{
if
(
this
.
draggedView
&&
this
.
draggedView
!==
view
)
{
counter
++
;
this
.
updateFromDragging
(
view
,
viewElement
,
true
);
}
}));
// Drag leave
disposables
.
push
(
dom
.
addDisposableListener
(
viewElement
,
dom
.
EventType
.
DRAG_LEAVE
,
(
e
:
DragEvent
)
=>
{
if
(
this
.
draggedView
&&
this
.
draggedView
!==
view
)
{
counter
--
;
if
(
counter
===
0
)
{
this
.
updateFromDragging
(
view
,
viewElement
,
false
);
}
}
}));
// Drag end
disposables
.
push
(
dom
.
addDisposableListener
(
viewElement
,
dom
.
EventType
.
DRAG_END
,
(
e
:
DragEvent
)
=>
{
if
(
this
.
draggedView
)
{
counter
=
0
;
this
.
updateFromDragging
(
view
,
viewElement
,
false
);
this
.
draggedView
=
null
;
}
}));
// Drop
disposables
.
push
(
dom
.
addDisposableListener
(
viewElement
,
dom
.
EventType
.
DROP
,
(
e
:
DragEvent
)
=>
{
dom
.
EventHelper
.
stop
(
e
,
true
);
counter
=
0
;
this
.
updateFromDragging
(
view
,
viewElement
,
false
);
if
(
this
.
draggedView
&&
this
.
draggedView
!==
view
)
{
this
.
move
(
this
.
views
.
indexOf
(
this
.
draggedView
),
this
.
views
.
indexOf
(
view
));
}
this
.
draggedView
=
null
;
}));
return
disposables
;
}
private
updateFromDragging
(
view
:
IView
,
viewElement
:
HTMLElement
,
isDragging
:
boolean
):
void
{
viewElement
.
style
.
backgroundColor
=
isDragging
&&
this
.
dropBackground
?
this
.
dropBackground
.
toString
()
:
null
;
}
private
move
(
fromIndex
:
number
,
toIndex
:
number
):
void
{
if
(
fromIndex
<
0
||
toIndex
>
this
.
views
.
length
-
2
)
{
return
;
}
const
[
viewChangeListener
]
=
this
.
viewChangeListeners
.
splice
(
fromIndex
,
1
);
this
.
viewChangeListeners
.
splice
(
toIndex
,
0
,
viewChangeListener
);
const
[
viewFocusPreviousListener
]
=
this
.
viewFocusPreviousListeners
.
splice
(
fromIndex
,
1
);
this
.
viewFocusPreviousListeners
.
splice
(
toIndex
,
0
,
viewFocusPreviousListener
);
const
[
viewFocusListener
]
=
this
.
viewFocusListeners
.
splice
(
fromIndex
,
1
);
this
.
viewFocusListeners
.
splice
(
toIndex
,
0
,
viewFocusListener
);
const
[
viewFocusNextListener
]
=
this
.
viewFocusNextListeners
.
splice
(
fromIndex
,
1
);
this
.
viewFocusNextListeners
.
splice
(
toIndex
,
0
,
viewFocusNextListener
);
const
[
viewDnDListeners
]
=
this
.
viewDnDListeners
.
splice
(
fromIndex
,
1
);
this
.
viewDnDListeners
.
splice
(
toIndex
,
0
,
viewDnDListeners
);
const
[
view
]
=
this
.
views
.
splice
(
fromIndex
,
1
);
this
.
views
.
splice
(
toIndex
,
0
,
view
);
const
[
weight
]
=
this
.
initialWeights
.
splice
(
fromIndex
,
1
);
this
.
initialWeights
.
splice
(
toIndex
,
0
,
weight
);
this
.
el
.
removeChild
(
this
.
viewElements
[
fromIndex
]);
this
.
el
.
insertBefore
(
this
.
viewElements
[
fromIndex
],
this
.
viewElements
[
toIndex
<
fromIndex
?
toIndex
:
toIndex
+
1
]);
const
[
viewElement
]
=
this
.
viewElements
.
splice
(
fromIndex
,
1
);
this
.
viewElements
.
splice
(
toIndex
,
0
,
viewElement
);
this
.
layout
();
this
.
_onDidOrderChange
.
fire
();
}
private
onSashStart
(
sash
:
sash
.
Sash
,
event
:
ISashEvent
):
void
{
let
i
=
this
.
sashes
.
indexOf
(
sash
);
let
collapses
=
this
.
views
.
map
(
v
=>
v
.
size
-
v
.
minimumSize
);
...
...
@@ -913,5 +1037,7 @@ export class SplitView implements
this
.
layoutViewElement
=
null
;
this
.
eventWrapper
=
null
;
this
.
state
=
null
;
super
.
dispose
();
}
}
src/vs/workbench/parts/views/browser/views.ts
浏览文件 @
119513fb
...
...
@@ -354,9 +354,15 @@ export class ComposedViewsViewlet extends Viewlet {
super
.
create
(
parent
);
this
.
viewletContainer
=
DOM
.
append
(
parent
.
getHTMLElement
(),
DOM
.
$
(
''
));
this
.
splitView
=
this
.
_register
(
new
SplitView
(
this
.
viewletContainer
/* , { canChangeOrderByDragAndDrop: true } */
));
//
this.attachSplitViewStyler(this.splitView);
this
.
splitView
=
this
.
_register
(
new
SplitView
(
this
.
viewletContainer
,
{
canChangeOrderByDragAndDrop
:
true
}
));
this
.
attachSplitViewStyler
(
this
.
splitView
);
this
.
_register
(
this
.
splitView
.
onFocus
((
view
:
IView
)
=>
this
.
lastFocusedView
=
view
));
this
.
_register
(
this
.
splitView
.
onDidOrderChange
(()
=>
{
const
views
=
this
.
splitView
.
getViews
<
IView
>
();
for
(
let
order
=
0
;
order
<
views
.
length
;
order
++
)
{
this
.
viewsStates
.
get
(
views
[
order
].
id
).
order
=
order
;
}
}));
return
this
.
onViewDescriptorsChanged
()
.
then
(()
=>
{
...
...
@@ -561,7 +567,7 @@ export class ComposedViewsViewlet extends Viewlet {
},
widget
);
}
pr
otected
attachSplitViewStyler
(
widget
:
IThemable
):
IDisposable
{
pr
ivate
attachSplitViewStyler
(
widget
:
IThemable
):
IDisposable
{
return
attachStyler
(
this
.
themeService
,
{
dropBackground
:
SIDE_BAR_DRAG_AND_DROP_BACKGROUND
},
widget
);
...
...
@@ -651,7 +657,7 @@ export class ComposedViewsViewlet extends Viewlet {
return
true
;
}
private
getViewDescriptorsFromRegistry
(
defaultOrder
:
boolean
=
tru
e
):
IViewDescriptor
[]
{
private
getViewDescriptorsFromRegistry
(
defaultOrder
:
boolean
=
fals
e
):
IViewDescriptor
[]
{
return
ViewsRegistry
.
getViews
(
this
.
location
)
.
sort
((
a
,
b
)
=>
{
const
viewStateA
=
this
.
viewsStates
.
get
(
a
.
id
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录