Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
徽霖
Vscode
提交
3393360f
V
Vscode
项目概览
徽霖
/
Vscode
通知
9
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
Vscode
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3393360f
编写于
2月 04, 2016
作者:
J
Joao Moreno
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
list: use diff on visible range
上级
5eae75a0
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
76 addition
and
84 deletion
+76
-84
src/vs/base/browser/ui/list/list.css
src/vs/base/browser/ui/list/list.css
+2
-1
src/vs/base/browser/ui/list/listImpl.ts
src/vs/base/browser/ui/list/listImpl.ts
+73
-82
src/vs/base/browser/ui/list/listTest.ts
src/vs/base/browser/ui/list/listTest.ts
+1
-1
未找到文件。
src/vs/base/browser/ui/list/list.css
浏览文件 @
3393360f
...
...
@@ -27,7 +27,7 @@
}
.monaco-list
.monaco-list-rows
{
position
:
absolut
e
;
position
:
relativ
e
;
width
:
100%
;
height
:
100%
;
}
...
...
@@ -41,6 +41,7 @@
overflow
:
hidden
;
width
:
100%
;
touch-action
:
none
;
position
:
absolute
;
}
.monaco-list
.monaco-list-rows
>
.monaco-list-row
>
.content
{
...
...
src/vs/base/browser/ui/list/listImpl.ts
浏览文件 @
3393360f
...
...
@@ -11,27 +11,43 @@ import { Gesture } from 'vs/base/browser/touch';
import
*
as
DOM
from
'
vs/base/browser/dom
'
;
import
{
IScrollableElement
}
from
'
vs/base/browser/ui/scrollbar/scrollableElement
'
;
import
{
ScrollableElement
}
from
'
vs/base/browser/ui/scrollbar/impl/scrollableElement
'
;
import
{
RangeMap
}
from
'
./rangeMap
'
;
import
{
RangeMap
,
IRange
}
from
'
./rangeMap
'
;
import
{
IScrollEvent
,
IDelegate
,
IRendererMap
}
from
'
./list
'
;
import
{
RowCache
,
IRow
}
from
'
./rowCache
'
;
import
{
LcsDiff
,
ISequence
}
from
'
vs/base/common/diff/diff
'
;
interface
IItemRange
<
T
>
{
item
:
IItem
<
T
>
;
index
:
number
;
range
:
IRange
;
}
interface
IItem
<
T
>
{
id
:
string
;
element
:
T
;
size
:
number
;
templateId
:
string
;
row
:
IRow
;
}
function
toSequence
<
T
>
(
itemRanges
:
IItemRange
<
T
>
[]):
ISequence
{
return
{
getLength
:
()
=>
itemRanges
.
length
,
getElementHash
:
i
=>
`
${
itemRanges
[
i
].
item
.
id
}
:
${
itemRanges
[
i
].
range
.
start
}
:
${
itemRanges
[
i
].
range
.
end
}
`
};
}
export
class
List
<
T
>
implements
IScrollable
{
private
items
:
IItem
<
T
>
[];
private
itemId
=
0
;
private
rangeMap
:
RangeMap
;
private
cache
:
RowCache
<
T
>
;
private
_
scrollTop
:
number
;
private
_
viewHeight
:
number
;
private
renderTop
:
number
;
private
renderHeight
:
number
;
private
scrollTop
:
number
;
private
viewHeight
:
number
;
private
renderTop
:
number
;
// TODO: renderTop vs scroll top?
private
renderHeight
:
number
;
// TODO: renderHeight vs view height?
private
domNode
:
HTMLElement
;
private
wrapper
:
HTMLElement
;
...
...
@@ -75,8 +91,8 @@ export class List<T> implements IScrollable {
this
.
domNode
.
appendChild
(
this
.
scrollableElement
.
getDomNode
());
container
.
appendChild
(
this
.
domNode
);
this
.
_
scrollTop
=
0
;
this
.
_
viewHeight
=
0
;
this
.
scrollTop
=
0
;
this
.
viewHeight
=
0
;
this
.
renderTop
=
0
;
this
.
renderHeight
=
0
;
...
...
@@ -84,7 +100,9 @@ export class List<T> implements IScrollable {
}
splice
(
start
:
number
,
deleteCount
:
number
,
...
elements
:
T
[]):
void
{
const
before
=
this
.
getRenderedItemRanges
();
const
inserted
=
elements
.
map
<
IItem
<
T
>>
(
element
=>
({
id
:
String
(
this
.
itemId
++
),
element
,
size
:
this
.
delegate
.
getHeight
(
element
),
templateId
:
this
.
delegate
.
getTemplateId
(
element
),
...
...
@@ -92,11 +110,23 @@ export class List<T> implements IScrollable {
}));
this
.
rangeMap
.
splice
(
start
,
deleteCount
,
...
inserted
);
this
.
items
.
splice
(
start
,
deleteCount
,
...
inserted
);
const
deleted
=
this
.
items
.
splice
(
start
,
deleteCount
,
...
inserted
);
deleted
.
forEach
(
item
=>
this
.
removeItemFromDOM
(
item
));
inserted
.
forEach
((
_
,
index
)
=>
this
.
refreshItem
(
start
+
index
));
const
after
=
this
.
getRenderedItemRanges
();
const
lcs
=
new
LcsDiff
(
toSequence
(
before
),
toSequence
(
after
),
null
);
const
diffs
=
lcs
.
ComputeDiff
();
for
(
const
diff
of
diffs
)
{
for
(
let
i
=
0
;
i
<
diff
.
originalLength
;
i
++
)
{
this
.
removeItemFromDOM
(
before
[
diff
.
originalStart
+
i
].
item
);
}
for
(
let
i
=
0
;
i
<
diff
.
modifiedLength
;
i
++
)
{
this
.
insertItemInDOM
(
after
[
diff
.
modifiedStart
+
i
].
item
,
after
[
0
].
index
+
diff
.
modifiedStart
+
i
);
}
}
this
.
rowsContainer
.
style
.
height
=
`
${
this
.
rangeMap
.
size
}
px`
;
this
.
setScrollTop
(
this
.
scrollTop
);
this
.
scrollableElement
.
onElementInternalDimensions
();
}
...
...
@@ -106,13 +136,8 @@ export class List<T> implements IScrollable {
}
layout
(
height
?:
number
):
void
{
// if (!this.isTreeVisible()) {
// return;
// }
this
.
viewHeight
=
height
||
DOM
.
getContentHeight
(
this
.
wrapper
);
// render
this
.
setScrollTop
(
this
.
scrollTop
);
// render
this
.
setViewHeight
(
height
||
DOM
.
getContentHeight
(
this
.
wrapper
));
this
.
setScrollTop
(
this
.
scrollTop
);
this
.
scrollableElement
.
onElementDimensions
();
this
.
scrollableElement
.
onElementInternalDimensions
();
}
...
...
@@ -144,7 +169,7 @@ export class List<T> implements IScrollable {
scrollTop
=
Math
.
max
(
scrollTop
,
0
);
this
.
render
(
scrollTop
,
this
.
viewHeight
);
this
.
_
scrollTop
=
scrollTop
;
this
.
scrollTop
=
scrollTop
;
this
.
_onScroll
.
fire
({
vertical
:
true
,
horizontal
:
false
});
}
...
...
@@ -155,21 +180,9 @@ export class List<T> implements IScrollable {
// Render Properties
private
get
viewHeight
()
{
return
this
.
_viewHeight
;
}
private
set
viewHeight
(
viewHeight
:
number
)
{
private
setViewHeight
(
viewHeight
:
number
)
{
this
.
render
(
this
.
scrollTop
,
viewHeight
);
this
.
_viewHeight
=
viewHeight
;
}
private
get
scrollTop
():
number
{
return
this
.
_scrollTop
;
}
private
set
scrollTop
(
scrollTop
:
number
)
{
this
.
setScrollTop
(
scrollTop
);
this
.
viewHeight
=
viewHeight
;
}
// Render
...
...
@@ -186,12 +199,12 @@ export class List<T> implements IScrollable {
// when view scrolls down, start rendering from the renderBottom
for
(
i
=
this
.
indexAfter
(
renderBottom
)
-
1
,
stop
=
this
.
rangeMap
.
indexAt
(
Math
.
max
(
thisRenderBottom
,
renderTop
));
i
>=
stop
;
i
--
)
{
this
.
insertItemInDOM
(
i
);
this
.
insertItemInDOM
(
this
.
items
[
i
],
i
);
}
// when view scrolls up, start rendering from either this.renderTop or renderBottom
for
(
i
=
Math
.
min
(
this
.
rangeMap
.
indexAt
(
this
.
renderTop
),
this
.
indexAfter
(
renderBottom
))
-
1
,
stop
=
this
.
rangeMap
.
indexAt
(
renderTop
);
i
>=
stop
;
i
--
)
{
this
.
insertItemInDOM
(
i
);
this
.
insertItemInDOM
(
this
.
items
[
i
],
i
);
}
// when view scrolls down, start unrendering from renderTop
...
...
@@ -204,81 +217,59 @@ export class List<T> implements IScrollable {
this
.
removeItemFromDOM
(
this
.
items
[
i
]);
}
const
topPosition
=
this
.
rangeMap
.
positionAt
(
this
.
rangeMap
.
indexAt
(
renderTop
));
if
(
topPosition
>
-
1
)
{
this
.
rowsContainer
.
style
.
top
=
(
topPosition
-
renderTop
)
+
'
px
'
;
}
this
.
rowsContainer
.
style
.
transform
=
`translate3d(0px, -
${
renderTop
}
px, 0px)`
;
this
.
renderTop
=
renderTop
;
this
.
renderHeight
=
renderBottom
-
renderTop
;
}
private
isInView
(
index
:
number
):
boolean
{
const
item
=
this
.
items
[
index
];
const
top
=
this
.
rangeMap
.
positionAt
(
index
);
return
top
<
this
.
renderTop
+
this
.
renderHeight
&&
top
+
item
.
size
>
this
.
renderTop
;
}
private
getRenderedItemRanges
():
IItemRange
<
T
>
[]
{
const
result
:
IItemRange
<
T
>
[]
=
[];
const
renderBottom
=
this
.
renderTop
+
this
.
renderHeight
;
private
refreshItem
(
index
:
number
):
void
{
if
(
index
<
0
)
{
return
;
}
let
start
=
this
.
renderTop
;
let
index
=
this
.
rangeMap
.
indexAt
(
start
);
let
item
=
this
.
items
[
index
]
;
let
end
=
-
1
;
if
(
this
.
isInView
(
index
))
{
this
.
insertItemInDOM
(
index
);
}
else
{
this
.
removeItemFromDOM
(
this
.
items
[
index
]);
while
(
item
&&
start
<
renderBottom
)
{
end
=
start
+
item
.
size
;
result
.
push
({
item
,
index
,
range
:
{
start
,
end
}});
start
=
end
;
item
=
this
.
items
[
++
index
];
}
}
private
insertItemInDOM
(
index
:
number
):
void
{
if
(
index
<
0
)
{
return
;
}
return
result
;
}
private
isInView
(
index
:
number
):
boolean
{
const
item
=
this
.
items
[
index
];
const
top
=
this
.
rangeMap
.
positionAt
(
index
);
return
top
<
this
.
renderTop
+
this
.
renderHeight
&&
top
+
item
.
size
>
this
.
renderTop
;
}
private
insertItemInDOM
(
item
:
IItem
<
T
>
,
index
:
number
):
void
{
if
(
!
item
.
row
)
{
item
.
row
=
this
.
cache
.
alloc
(
item
.
templateId
);
// used in reverse lookup from HTMLElement to Item
// (<any> this.element)[TreeView.BINDING] = this;
}
item
.
row
.
domNode
.
style
.
top
=
`
${
this
.
rangeMap
.
positionAt
(
index
)
}
px`
;
if
(
item
.
row
.
domNode
.
parentElement
)
{
return
;
}
const
nextItem
=
this
.
items
[
index
+
1
]
;
this
.
rowsContainer
.
appendChild
(
item
.
row
.
domNode
)
;
if
(
nextItem
&&
nextItem
.
row
)
{
this
.
rowsContainer
.
insertBefore
(
item
.
row
.
domNode
,
nextItem
.
row
.
domNode
);
}
else
{
this
.
rowsContainer
.
appendChild
(
item
.
row
.
domNode
);
}
this
.
renderItem
(
index
);
const
renderer
=
this
.
renderers
[
item
.
templateId
];
item
.
row
.
domNode
.
style
.
height
=
`
${
item
.
size
}
px`
;
renderer
.
renderElement
(
item
.
element
,
item
.
row
.
templateData
);
}
private
removeItemFromDOM
(
item
:
IItem
<
T
>
):
void
{
if
(
!
item
||
!
item
.
row
)
{
return
;
}
// (<any> this.element)[TreeView.BINDING] = null;
this
.
cache
.
release
(
item
.
row
);
item
.
row
=
null
;
}
private
renderItem
(
index
:
number
):
void
{
const
item
=
this
.
items
[
index
];
const
renderer
=
this
.
renderers
[
item
.
templateId
];
item
.
row
.
domNode
.
style
.
height
=
`
${
item
.
size
}
px`
;
renderer
.
renderElement
(
item
.
element
,
item
.
row
.
templateData
);
}
dispose
()
{
this
.
items
=
null
;
...
...
src/vs/base/browser/ui/list/listTest.ts
浏览文件 @
3393360f
...
...
@@ -79,7 +79,7 @@ export function addPersonToList(name, index) {
};
index
=
Number
(
index
);
index
=
i
ndex
===
NaN
?
list
.
length
:
Math
.
min
(
index
,
list
.
length
);
index
=
i
sNaN
(
index
)
?
list
.
length
:
Math
.
min
(
index
,
list
.
length
);
list
.
splice
(
index
,
0
,
person
);
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录