Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
xxadev
vscode
提交
8a0c89f0
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,发现更多精彩内容 >>
提交
8a0c89f0
编写于
5月 03, 2018
作者:
J
Joao Moreno
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
grid dnd
上级
da511396
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
61 addition
and
27 deletion
+61
-27
src/vs/base/browser/ui/grid/grid.ts
src/vs/base/browser/ui/grid/grid.ts
+37
-3
test/grid.html
test/grid.html
+24
-24
未找到文件。
src/vs/base/browser/ui/grid/grid.ts
浏览文件 @
8a0c89f0
...
@@ -7,9 +7,10 @@
...
@@ -7,9 +7,10 @@
import
'
vs/css!./gridview
'
;
import
'
vs/css!./gridview
'
;
import
{
Orientation
}
from
'
vs/base/browser/ui/sash/sash
'
;
import
{
Orientation
}
from
'
vs/base/browser/ui/sash/sash
'
;
import
{
IDisposable
}
from
'
vs/base/common/lifecycle
'
;
import
{
IDisposable
,
dispose
}
from
'
vs/base/common/lifecycle
'
;
import
{
tail2
as
tail
,
equals
}
from
'
vs/base/common/arrays
'
;
import
{
tail2
as
tail
,
equals
}
from
'
vs/base/common/arrays
'
;
import
{
orthogonal
,
IView
,
GridView
,
GridBranchNode
}
from
'
./gridview
'
;
import
{
orthogonal
,
IView
,
GridView
,
GridBranchNode
}
from
'
./gridview
'
;
import
{
domEvent
}
from
'
vs/base/browser/event
'
;
export
{
Orientation
}
from
'
./gridview
'
;
export
{
Orientation
}
from
'
./gridview
'
;
...
@@ -72,18 +73,51 @@ function directionOrientation(direction: Direction): Orientation {
...
@@ -72,18 +73,51 @@ function directionOrientation(direction: Direction): Orientation {
return
direction
===
Direction
.
Up
||
direction
===
Direction
.
Down
?
Orientation
.
VERTICAL
:
Orientation
.
HORIZONTAL
;
return
direction
===
Direction
.
Up
||
direction
===
Direction
.
Down
?
Orientation
.
VERTICAL
:
Orientation
.
HORIZONTAL
;
}
}
export
interface
IGridDnd
{
}
export
interface
IGridOptions
{
dnd
?:
IGridDnd
;
}
class
DndController
implements
IDisposable
{
private
disposables
:
IDisposable
[]
=
[];
constructor
(
container
:
HTMLElement
,
gridview
:
GridView
)
{
domEvent
(
container
,
'
dragover
'
)(
this
.
onDragOver
,
this
,
this
.
disposables
);
}
private
onDragOver
(
ev
:
DragEvent
)
{
// find target element
console
.
log
(
'
DRAG OVER
'
);
}
dispose
():
void
{
this
.
disposables
=
dispose
(
this
.
disposables
);
}
}
export
class
Grid
<
T
extends
IView
>
implements
IDisposable
{
export
class
Grid
<
T
extends
IView
>
implements
IDisposable
{
private
gridview
:
GridView
;
private
gridview
:
GridView
;
private
views
=
new
Map
<
T
,
HTMLElement
>
();
private
views
=
new
Map
<
T
,
HTMLElement
>
();
private
disposables
:
IDisposable
[]
=
[];
get
orientation
():
Orientation
{
return
this
.
gridview
.
orientation
;
}
get
orientation
():
Orientation
{
return
this
.
gridview
.
orientation
;
}
set
orientation
(
orientation
:
Orientation
)
{
this
.
gridview
.
orientation
=
orientation
;
}
set
orientation
(
orientation
:
Orientation
)
{
this
.
gridview
.
orientation
=
orientation
;
}
constructor
(
container
:
HTMLElement
,
view
:
T
)
{
constructor
(
container
:
HTMLElement
,
view
:
T
,
options
:
IGridOptions
=
{}
)
{
this
.
gridview
=
new
GridView
(
container
);
this
.
gridview
=
new
GridView
(
container
);
this
.
disposables
.
push
(
this
.
gridview
);
this
.
views
.
set
(
view
,
view
.
element
);
this
.
views
.
set
(
view
,
view
.
element
);
this
.
gridview
.
addView
(
view
,
0
,
[
0
]);
this
.
gridview
.
addView
(
view
,
0
,
[
0
]);
if
(
options
.
dnd
)
{
this
.
disposables
.
push
(
new
DndController
(
container
,
this
.
gridview
));
}
}
}
layout
(
width
:
number
,
height
:
number
):
void
{
layout
(
width
:
number
,
height
:
number
):
void
{
...
@@ -180,6 +214,6 @@ export class Grid<T extends IView> implements IDisposable {
...
@@ -180,6 +214,6 @@ export class Grid<T extends IView> implements IDisposable {
}
}
dispose
():
void
{
dispose
():
void
{
this
.
gridview
.
dispose
(
);
this
.
disposables
=
dispose
(
this
.
disposables
);
}
}
}
}
test/grid.html
浏览文件 @
8a0c89f0
...
@@ -38,37 +38,37 @@
...
@@ -38,37 +38,37 @@
element
.
className
=
'
box
'
;
element
.
className
=
'
box
'
;
element
.
style
.
backgroundColor
=
`hsl(
${
Math
.
round
(
Math
.
random
()
*
360
)}
, 72%, 72%)`
;
element
.
style
.
backgroundColor
=
`hsl(
${
Math
.
round
(
Math
.
random
()
*
360
)}
, 72%, 72%)`
;
element
.
addEventListener
(
'
dragover
'
,
ev
=>
{
//
element.addEventListener('dragover', ev => {
ev
.
preventDefault
();
//
ev.preventDefault();
if
(
draggingOver
===
view
)
{
//
if (draggingOver === view) {
return
;
//
return;
}
//
}
if
(
draggingOver
)
{
//
if (draggingOver) {
draggingOver
.
element
.
style
.
opacity
=
1
;
//
draggingOver.element.style.opacity = 1;
}
//
}
if
(
dragging
!==
view
)
{
//
if (dragging !== view) {
element
.
style
.
opacity
=
0.5
;
//
element.style.opacity = 0.5;
}
//
}
draggingOver
=
view
;
//
draggingOver = view;
});
//
});
element
.
addEventListener
(
'
drop
'
,
ev
=>
{
//
element.addEventListener('drop', ev => {
ev
.
preventDefault
();
//
ev.preventDefault();
if
(
draggingOver
)
{
//
if (draggingOver) {
draggingOver
.
element
.
style
.
opacity
=
1
;
//
draggingOver.element.style.opacity = 1;
}
//
}
if
(
!
dragging
)
{
//
if (!dragging) {
return
;
//
return;
}
//
}
grid
.
swapViews
(
dragging
,
view
);
//
grid.swapViews(dragging, view);
});
//
});
let
label
=
document
.
createElement
(
'
div
'
);
let
label
=
document
.
createElement
(
'
div
'
);
label
.
className
=
'
box-label
'
;
label
.
className
=
'
box-label
'
;
...
@@ -106,7 +106,7 @@
...
@@ -106,7 +106,7 @@
// document.body.appendChild(box);
// document.body.appendChild(box);
const
view1
=
createView
();
const
view1
=
createView
();
const
grid
=
new
Grid
(
document
.
body
,
view1
);
const
grid
=
new
Grid
(
document
.
body
,
view1
,
{
dnd
:
{}
}
);
const
layout
=
()
=>
grid
.
layout
(
document
.
body
.
clientWidth
,
document
.
body
.
clientHeight
);
const
layout
=
()
=>
grid
.
layout
(
document
.
body
.
clientWidth
,
document
.
body
.
clientHeight
);
window
.
onresize
=
()
=>
{
window
.
onresize
=
()
=>
{
layout
();
layout
();
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录