Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Léo-Paul Géneau
gitlab-ce
Commits
197f9abe
Commit
197f9abe
authored
11 years ago
by
Sato Hiroyuki
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Covert to coffee.
parent
b8f070f0
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
254 additions
and
379 deletions
+254
-379
app/assets/javascripts/branch-graph.js.coffee
app/assets/javascripts/branch-graph.js.coffee
+254
-379
No files found.
app/assets/javascripts/branch-graph.js.coffee
View file @
197f9abe
!
function
(){
var
BranchGraph
=
function
(
element
,
options
){
this
.
element
=
element
;
this
.
options
=
options
;
this
.
preparedCommits
=
{};
this
.
mtime
=
0
;
this
.
mspace
=
0
;
this
.
parents
=
{};
this
.
colors
=
[
"#000"
];
this
.
load
();
};
BranchGraph
.
prototype
.
load
=
function
(){
$
.
ajax
({
url
:
this
.
options
.
url
,
method
:
'get'
,
dataType
:
'json'
,
success
:
$
.
proxy
(
function
(
data
){
$
(
'.loading'
,
this
.
element
).
hide
();
this
.
prepareData
(
data
.
days
,
data
.
commits
);
this
.
buildGraph
();
},
this
)
});
};
BranchGraph
.
prototype
.
prepareData
=
function
(
days
,
commits
){
this
.
days
=
days
;
this
.
dayCount
=
days
.
length
;
this
.
commits
=
commits
;
this
.
commitCount
=
commits
.
length
;
this
.
collectParents
();
this
.
mtime
+=
4
;
this
.
mspace
+=
10
;
for
(
var
i
=
0
;
i
<
this
.
commitCount
;
i
++
)
{
if
(
this
.
commits
[
i
].
id
in
this
.
parents
)
{
this
.
commits
[
i
].
isParent
=
true
;
}
this
.
preparedCommits
[
this
.
commits
[
i
].
id
]
=
this
.
commits
[
i
];
}
this
.
collectColors
();
};
BranchGraph
.
prototype
.
collectParents
=
function
(){
for
(
var
i
=
0
;
i
<
this
.
commitCount
;
i
++
)
{
for
(
var
j
=
0
,
jj
=
this
.
commits
[
i
].
parents
.
length
;
j
<
jj
;
j
++
)
{
this
.
parents
[
this
.
commits
[
i
].
parents
[
j
][
0
]]
=
true
;
}
this
.
mtime
=
Math
.
max
(
this
.
mtime
,
this
.
commits
[
i
].
time
);
this
.
mspace
=
Math
.
max
(
this
.
mspace
,
this
.
commits
[
i
].
space
);
}
};
BranchGraph
.
prototype
.
collectColors
=
function
(){
for
(
var
k
=
0
;
k
<
this
.
mspace
;
k
++
)
{
this
.
colors
.
push
(
Raphael
.
getColor
(.
8
));
//
Skipping
a
few
colors
in
the
spectrum
to
get
more
contrast
between
colors
Raphael
.
getColor
();
Raphael
.
getColor
();
}
};
BranchGraph
.
prototype
.
buildGraph
=
function
(){
var
graphWidth
=
$
(
this
.
element
).
width
()
,
ch
=
this
.
mspace
*
20
+
100
,
cw
=
Math
.
max
(
graphWidth
,
this
.
mtime
*
20
+
260
)
,
r
=
Raphael
(
this
.
element
.
get
(
0
),
cw
,
ch
)
,
top
=
r
.
set
()
,
cuday
=
0
,
cumonth
=
""
,
offsetX
=
20
,
offsetY
=
60
,
barWidth
=
Math
.
max
(
graphWidth
,
this
.
dayCount
*
20
+
320
)
,
scrollLeft
=
cw
;
this
.
raphael
=
r
;
r
.
rect
(
0
,
0
,
barWidth
,
20
).
attr
({
fill
:
"#222"
});
r
.
rect
(
0
,
20
,
barWidth
,
20
).
attr
({
fill
:
"#444"
});
for
(
mm
=
0
;
mm
<
this
.
dayCount
;
mm
++
)
{
if
(
this
.
days
[
mm
]
!=
null
){
if
(
cuday
!=
this
.
days
[
mm
][
0
]){
//
Dates
r
.
text
(
offsetX
+
mm
*
20
,
31
,
this
.
days
[
mm
][
0
]).
attr
({
font
:
"12px Monaco, monospace"
,
class
BranchGraph
constructor
:
(
@
element
,
@
options
)
->
@
preparedCommits
=
{}
@
mtime
=
0
@
mspace
=
0
@
parents
=
{}
@
colors
=
[
"#000"
]
@
load
()
load
:
->
$
.
ajax
url
:
@
options
.
url
method
:
"get"
dataType
:
"json"
success
:
$
.
proxy
((
data
)
->
$
(
".loading"
,
@
element
).
hide
()
@
prepareData
data
.
days
,
data
.
commits
@
buildGraph
()
,
this
)
prepareData
:
(
@
days
,
@
commits
)
->
@
collectParents
()
@
mtime
+=
4
@
mspace
+=
10
for
c
in
@
commits
c
.
isParent
=
true
if
c
.
id
of
@
parents
@
preparedCommits
[
c
.
id
]
=
c
@
collectColors
()
collectParents
:
->
for
c
in
@
commits
@
mtime
=
Math
.
max
(
@
mtime
,
c
.
time
)
@
mspace
=
Math
.
max
(
@
mspace
,
c
.
space
)
for
p
in
c
.
parents
@
parents
[
p
[
0
]]
=
true
collectColors
:
->
k
=
0
while
k
<
@
mspace
@
colors
.
push
Raphael
.
getColor
(.
8
)
# Skipping a few colors in the spectrum to get more contrast between colors
Raphael
.
getColor
()
Raphael
.
getColor
()
k
++
buildGraph
:
->
graphWidth
=
$
(
@
element
).
width
()
ch
=
@
mspace
*
20
+
100
cw
=
Math
.
max
(
graphWidth
,
@
mtime
*
20
+
260
)
r
=
Raphael
(
@
element
.
get
(
0
),
cw
,
ch
)
top
=
r
.
set
()
cuday
=
0
cumonth
=
""
offsetX
=
20
offsetY
=
60
barWidth
=
Math
.
max
(
graphWidth
,
@
days
.
length
*
20
+
320
)
scrollLeft
=
cw
@
raphael
=
r
r
.
rect
(
0
,
0
,
barWidth
,
20
).
attr
fill
:
"#222"
r
.
rect
(
0
,
20
,
barWidth
,
20
).
attr
fill
:
"#444"
for
day
,
mm
in
@
days
if
cuday
isnt
day
[
0
]
# Dates
r
.
text
(
offsetX
+
mm
*
20
,
31
,
day
[
0
])
.
attr
(
font
:
"12px Monaco, monospace"
fill
:
"#DDD"
});
cuday
=
this
.
days
[
mm
][
0
];
}
if
(
cumonth
!=
this
.
days
[
mm
][
1
]){
//
Months
r
.
text
(
offsetX
+
mm
*
20
,
11
,
this
.
days
[
mm
][
1
]).
attr
({
font
:
"12px Monaco, monospace"
,
)
cuday
=
day
[
0
]
if
cumonth
isnt
day
[
1
]
# Months
r
.
text
(
offsetX
+
mm
*
20
,
11
,
day
[
1
])
.
attr
(
font
:
"12px Monaco, monospace"
fill
:
"#EEE"
});
cumonth
=
this
.
days
[
mm
][
1
];
}
}
}
for
(
i
=
0
;
i
<
this
.
commitCount
;
i
++
)
{
var
x
=
offsetX
+
20
*
this
.
commits
[
i
].
time
,
y
=
offsetY
+
10
*
this
.
commits
[
i
].
space
,
c
,
ps
;
//
Draw
dot
r
.
circle
(
x
,
y
,
3
).
attr
({
fill
:
this
.
colors
[
this
.
commits
[
i
].
space
],
)
cumonth
=
day
[
1
]
for
commit
in
@
commits
x
=
offsetX
+
20
*
commit
.
time
y
=
offsetY
+
10
*
commit
.
space
# Draw dot
r
.
circle
(
x
,
y
,
3
).
attr
(
fill
:
@
colors
[
commit
.
space
]
stroke
:
"none"
});
//
Draw
lines
for
(
var
j
=
0
,
jj
=
this
.
commits
[
i
].
parents
.
length
;
j
<
jj
;
j
++
)
{
c
=
this
.
preparedCommits
[
this
.
commits
[
i
].
parents
[
j
][
0
]];
ps
=
this
.
commits
[
i
].
parents
[
j
][
1
];
var
cx
=
offsetX
+
20
*
c
.
time
,
cy
=
offsetY
+
10
*
c
.
space
,
psy
=
offsetY
+
10
*
ps
;
if
(
c
.
space
==
this
.
commits
[
i
].
space
&&
c
.
space
==
ps
)
{
r
.
path
([
"M"
,
x
,
y
,
"L"
,
cx
,
cy
]).
attr
({
stroke
:
this
.
colors
[
c
.
space
],
)
# Draw lines
for
parent
in
commit
.
parents
parentCommit
=
@
preparedCommits
[
parent
[
0
]]
parentX
=
offsetX
+
20
*
parentCommit
.
time
parentY1
=
offsetY
+
10
*
parentCommit
.
space
parentY2
=
offsetY
+
10
*
parent
[
1
]
if
parentCommit
.
space
is
commit
.
space
and
parentCommit
.
space
is
parent
[
1
]
r
.
path
([
"M"
,
x
,
y
,
"L"
,
parentX
,
parentY1
]).
attr
(
stroke
:
@
colors
[
parentCommit
.
space
]
"stroke-width"
:
2
});
)
}
else
if
(
c
.
space
<
this
.
commits
[
i
].
space
)
{
if
(
y
==
psy
)
{
r
.
path
([
"M"
,
x
-
5
,
y
,
"l-5,-2,0,4,5,-2"
,
"L"
,
x
-
10
,
y
,
"L"
,
x
-
15
,
psy
,
"L"
,
cx
+
5
,
psy
,
"L"
,
cx
,
cy
])
.
attr
({
stroke
:
this
.
colors
[
this
.
commits
[
i
].
space
],
"stroke-width"
:
2
});
}
else
{
r
.
path
([
"M"
,
x
-
3
,
y
-
6
,
"l-4,-3,4,-2,0,5"
,
"L"
,
x
-
5
,
y
-
10
,
"L"
,
x
-
10
,
psy
,
"L"
,
cx
+
5
,
psy
,
"L"
,
cx
,
cy
])
.
attr
({
stroke
:
this
.
colors
[
this
.
commits
[
i
].
space
],
"stroke-width"
:
2
});
}
}
else
{
r
.
path
([
"M"
,
x
-
3
,
y
+
6
,
"l-4,3,4,2,0,-5"
,
"L"
,
x
-
5
,
y
+
10
,
"L"
,
x
-
10
,
psy
,
"L"
,
cx
+
5
,
psy
,
"L"
,
cx
,
cy
])
.
attr
({
stroke
:
this
.
colors
[
c
.
space
],
else
if
parentCommit
.
space
<
commit
.
space
if
y
is
parentY2
r
.
path
([
"M"
,
x
-
5
,
y
,
"l-5,-2,0,4,5,-2"
,
"L"
,
x
-
10
,
y
,
"L"
,
x
-
15
,
parentY2
,
"L"
,
parentX
+
5
,
parentY2
,
"L"
,
parentX
,
parentY1
]).
attr
(
stroke
:
@
colors
[
commit
.
space
]
"stroke-width"
:
2
});
}
}
)
if
(
this
.
commits
[
i
].
refs
)
{
this
.
appendLabel
(
x
,
y
,
this
.
commits
[
i
].
refs
);
}
else
r
.
path
([
"M"
,
x
-
3
,
y
-
6
,
"l-4,-3,4,-2,0,5"
,
"L"
,
x
-
5
,
y
-
10
,
"L"
,
x
-
10
,
parentY2
,
"L"
,
parentX
+
5
,
parentY2
,
"L"
,
parentX
,
parentY1
]).
attr
(
stroke
:
@
colors
[
commit
.
space
]
"stroke-width"
:
2
)
//
mark
commit
and
displayed
in
the
center
if
(
this
.
commits
[
i
].
id
==
this
.
options
.
commit_id
)
{
r
.
path
([
'M'
,
x
,
y
-
5
,
'L'
,
x
+
4
,
y
-
15
,
'L'
,
x
-
4
,
y
-
15
,
'Z'
]).
attr
({
"fill"
:
"#000"
,
"fill-opacity"
:
.
7
,
"stroke"
:
"none"
});
scrollLeft
=
x
-
graphWidth
/
2
;
}
else
r
.
path
([
"M"
,
x
-
3
,
y
+
6
,
"l-4,3,4,2,0,-5"
,
"L"
,
x
-
5
,
y
+
10
,
"L"
,
x
-
10
,
parentY2
,
"L"
,
parentX
+
5
,
parentY2
,
"L"
,
parentX
,
parentY1
]).
attr
(
stroke
:
@
colors
[
parentCommit
.
space
]
"stroke-width"
:
2
)
this
.
appendAnchor
(
top
,
this
.
commits
[
i
],
x
,
y
);
}
top
.
toFront
();
this
.
element
.
scrollLeft
(
scrollLeft
);
this
.
bindEvents
();
};
@
appendLabel
x
,
y
,
commit
.
refs
if
commit
.
refs
BranchGraph
.
prototype
.
bindEvents
=
function
(){
var
drag
=
{}
,
element
=
this
.
element
;
# Mark commit and displayed in the center
if
commit
.
id
is
@
options
.
commit_id
r
.
path
([
"M"
,
x
,
y
-
5
,
"L"
,
x
+
4
,
y
-
15
,
"L"
,
x
-
4
,
y
-
15
,
"Z"
]).
attr
(
fill
:
"#000"
"fill-opacity"
:
.
7
stroke
:
"none"
)
var
dragger
=
function
(
event
){
element
.
scrollLeft
(
drag
.
sl
-
(
event
.
clientX
-
drag
.
x
));
element
.
scrollTop
(
drag
.
st
-
(
event
.
clientY
-
drag
.
y
));
};
scrollLeft
=
x
-
graphWidth
/
2
element
.
on
({
mousedown
:
function
(
event
)
{
drag
=
{
x
:
event
.
clientX
,
y
:
event
.
clientY
,
st
:
element
.
scrollTop
(),
sl
:
element
.
scrollLeft
()
};
$
(
window
).
on
(
'mousemove'
,
dragger
);
}
});
$
(
window
).
on
({
mouseup
:
function
(){
//
bars
.
animate
({
opacity
:
0
},
300
);
$
(
window
).
off
(
'mousemove'
,
dragger
);
},
keydown
:
function
(
event
){
if
(
event
.
keyCode
==
37
){
//
left
element
.
scrollLeft
(
element
.
scrollLeft
()
-
50
);
}
if
(
event
.
keyCode
==
38
){
//
top
element
.
scrollTop
(
element
.
scrollTop
()
-
50
);
}
if
(
event
.
keyCode
==
39
){
//
right
element
.
scrollLeft
(
element
.
scrollLeft
()
+
50
);
}
if
(
event
.
keyCode
==
40
){
//
bottom
element
.
scrollTop
(
element
.
scrollTop
()
+
50
);
}
}
});
};
@
appendAnchor
top
,
commit
,
x
,
y
BranchGraph
.
prototype
.
appendLabel
=
function
(
x
,
y
,
refs
){
var
r
=
this
.
raphael
,
shortrefs
=
refs
,
text
,
textbox
,
rect
;
top
.
toFront
()
@
element
.
scrollLeft
scrollLeft
@
bindEvents
()
if
(
shortrefs
.
length
>
17
){
//
Truncate
if
longer
than
15
chars
shortrefs
=
shortrefs
.
substr
(
0
,
15
)
+
"…"
;
}
bindEvents
:
->
drag
=
{}
element
=
@
element
dragger
=
(
event
)
->
element
.
scrollLeft
drag
.
sl
-
(
event
.
clientX
-
drag
.
x
)
element
.
scrollTop
drag
.
st
-
(
event
.
clientY
-
drag
.
y
)
text
=
r
.
text
(
x
+
5
,
y
+
8
+
10
,
shortrefs
).
attr
({
font
:
"10px Monaco, monospace"
,
fill
:
"#FFF"
,
element
.
on
mousedown
:
(
event
)
->
drag
=
x
:
event
.
clientX
y
:
event
.
clientY
st
:
element
.
scrollTop
()
sl
:
element
.
scrollLeft
()
$
(
window
).
on
"mousemove"
,
dragger
$
(
window
).
on
mouseup
:
->
$
(
window
).
off
"mousemove"
,
dragger
keydown
:
(
event
)
->
# left
element
.
scrollLeft
element
.
scrollLeft
()
-
50
if
event
.
keyCode
is
37
# top
element
.
scrollTop
element
.
scrollTop
()
-
50
if
event
.
keyCode
is
38
# right
element
.
scrollLeft
element
.
scrollLeft
()
+
50
if
event
.
keyCode
is
39
# bottom
element
.
scrollTop
element
.
scrollTop
()
+
50
if
event
.
keyCode
is
40
appendLabel
:
(
x
,
y
,
refs
)
->
r
=
@
raphael
shortrefs
=
refs
# Truncate if longer than 15 chars
shortrefs
=
shortrefs
.
substr
(
0
,
15
)
+
"…"
if
shortrefs
.
length
>
17
text
=
r
.
text
(
x
+
5
,
y
+
8
+
10
,
shortrefs
).
attr
(
font
:
"10px Monaco, monospace"
fill
:
"#FFF"
title
:
refs
});
textbox
=
text
.
getBBox
();
text
.
transform
([
't'
,
textbox
.
height
/-
4
,
textbox
.
width
/
2
+
5
,
'r90'
]);
//
Create
rectangle
based
on
the
size
of
the
textbox
rect
=
r
.
rect
(
x
,
y
,
textbox
.
width
+
15
,
textbox
.
height
+
5
,
4
).
attr
({
"fill"
:
"#000"
,
"fill-opacity"
:
.
7
,
"stroke"
:
"none"
});
triangle
=
r
.
path
([
'M'
,
x
,
y
+
5
,
'L'
,
x
+
4
,
y
+
15
,
'L'
,
x
-
4
,
y
+
15
,
'Z'
]).
attr
({
"fill"
:
"#000"
,
"fill-opacity"
:
.
7
,
"stroke"
:
"none"
});
//
Rotate
and
reposition
rectangle
over
text
rect
.
transform
([
'r'
,
90
,
x
,
y
,
't'
,
15
,
-
9
]);
//
Set
text
to
front
text
.
toFront
();
};
BranchGraph
.
prototype
.
appendAnchor
=
function
(
top
,
commit
,
x
,
y
)
{
var
r
=
this
.
raphael
,
options
=
this
.
options
,
anchor
;
anchor
=
r
.
circle
(
x
,
y
,
10
).
attr
({
fill
:
"#000"
,
opacity
:
0
,
)
textbox
=
text
.
getBBox
()
text
.
transform
[
"t"
,
textbox
.
height
/ -4, textbox.width /
2
+
5
,
"r90"
]
# Create rectangle based on the size of the textbox
rect
=
r
.
rect
(
x
,
y
,
textbox
.
width
+
15
,
textbox
.
height
+
5
,
4
).
attr
(
fill
:
"#000"
"fill-opacity"
:
.
7
stroke
:
"none"
)
triangle
=
r
.
path
([
"M"
,
x
,
y
+
5
,
"L"
,
x
+
4
,
y
+
15
,
"L"
,
x
-
4
,
y
+
15
,
"Z"
]).
attr
(
fill
:
"#000"
"fill-opacity"
:
.
7
stroke
:
"none"
)
# Rotate and reposition rectangle over text
rect
.
transform
[
"r"
,
90
,
x
,
y
,
"t"
,
15
,
-
9
]
# Set text to front
text
.
toFront
()
appendAnchor
:
(
top
,
commit
,
x
,
y
)
->
r
=
@
raphael
options
=
@
options
anchor
=
r
.
circle
(
x
,
y
,
10
).
attr
(
fill
:
"#000"
opacity
:
0
cursor
:
"pointer"
})
.
click
(
function
(){
window
.
open
(
options
.
commit_url
.
replace
(
'%s'
,
commit
.
id
),
'_blank'
);
})
.
hover
(
function
(){
this
.
tooltip
=
r
.
commitTooltip
(
x
,
y
+
5
,
commit
);
top
.
push
(
this
.
tooltip
.
insertBefore
(
this
));
},
function
(){
this
.
tooltip
&&
this
.
tooltip
.
remove
()
&&
delete
this
.
tooltip
;
});
top
.
push
(
anchor
);
};
this
.
BranchGraph
=
BranchGraph
;
}(
this
);
Raphael
.
fn
.
commitTooltip
=
function
(
x
,
y
,
commit
){
var
icon
,
nameText
,
idText
,
messageText
,
boxWidth
=
300
,
boxHeight
=
200
;
icon
=
this
.
image
(
commit
.
author
.
icon
,
x
,
y
,
20
,
20
);
nameText
=
this
.
text
(
x
+
25
,
y
+
10
,
commit
.
author
.
name
);
idText
=
this
.
text
(
x
,
y
+
35
,
commit
.
id
);
messageText
=
this
.
text
(
x
,
y
+
50
,
commit
.
message
);
textSet
=
this
.
set
(
icon
,
nameText
,
idText
,
messageText
).
attr
({
"text-anchor"
:
"start"
,
"font"
:
"12px Monaco, monospace"
});
nameText
.
attr
({
"font"
:
"14px Arial"
,
).
click
(
->
window
.
open
options
.
commit_url
.
replace
(
"%s"
,
commit
.
id
),
"_blank"
).
hover
(
->
@
tooltip
=
r
.
commitTooltip
(
x
,
y
+
5
,
commit
)
top
.
push
@
tooltip
.
insertBefore
(
this
)
,
->
@
tooltip
and
@
tooltip
.
remove
()
and
delete
@
tooltip
)
top
.
push
anchor
Raphael
::
commitTooltip
=
(
x
,
y
,
commit
)
->
icon
=
undefined
nameText
=
undefined
idText
=
undefined
messageText
=
undefined
boxWidth
=
300
boxHeight
=
200
icon
=
@
image
(
commit
.
author
.
icon
,
x
,
y
,
20
,
20
)
nameText
=
@
text
(
x
+
25
,
y
+
10
,
commit
.
author
.
name
)
idText
=
@
text
(
x
,
y
+
35
,
commit
.
id
)
messageText
=
@
text
(
x
,
y
+
50
,
commit
.
message
)
textSet
=
@
set
(
icon
,
nameText
,
idText
,
messageText
).
attr
(
"text-anchor"
:
"start"
font
:
"12px Monaco, monospace"
)
nameText
.
attr
(
font
:
"14px Arial"
"font-weight"
:
"bold"
});
idText
.
attr
({
"fill"
:
"#AAA"
});
textWrap
(
messageText
,
boxWidth
-
50
);
var
rect
=
this
.
rect
(
x
-
10
,
y
-
10
,
boxWidth
,
100
,
4
).
attr
({
"fill"
:
"#FFF"
,
"stroke"
:
"#000"
,
"stroke-linecap"
:
"round"
,
)
idText
.
attr
fill
:
"#AAA"
@
textWrap
messageText
,
boxWidth
-
50
rect
=
@
rect
(
x
-
10
,
y
-
10
,
boxWidth
,
100
,
4
).
attr
(
fill
:
"#FFF"
stroke
:
"#000"
"stroke-linecap"
:
"round"
"stroke-width"
:
2
});
var
tooltip
=
this
.
set
(
rect
,
textSet
);
rect
.
attr
({
"height"
:
tooltip
.
getBBox
().
height
+
10
,
"width"
:
tooltip
.
getBBox
().
width
+
10
});
tooltip
.
transform
([
't'
,
20
,
20
]);
return
tooltip
;
};
function
textWrap
(
t
,
width
)
{
var
content
=
t
.
attr
(
"text"
);
var
abc
=
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
;
t
.
attr
({
"text"
:
abc
});
var
letterWidth
=
t
.
getBBox
().
width
/
abc
.
length
;
t
.
attr
({
"text"
:
content
});
var
words
=
content
.
split
(
" "
);
var
x
=
0
,
s
=
[];
for
(
var
i
=
0
;
i
<
words
.
length
;
i
++
)
{
var
l
=
words
[
i
].
length
;
if
(
x
+
(
l
*
letterWidth
)
>
width
)
{
s
.
push
(
"
\n
"
);
x
=
0
;
}
x
+=
l
*
letterWidth
;
s
.
push
(
words
[
i
]
+
" "
);
}
t
.
attr
({
"text"
:
s
.
join
(
""
)
});
var
b
=
t
.
getBBox
()
,
h
=
Math
.
abs
(
b
.
y2
)
-
Math
.
abs
(
b
.
y
)
+
1
;
t
.
attr
({
"y"
:
b
.
y
+
h
});
}
)
tooltip
=
@
set
(
rect
,
textSet
)
rect
.
attr
(
height
:
tooltip
.
getBBox
().
height
+
10
width
:
tooltip
.
getBBox
().
width
+
10
)
tooltip
.
transform
[
"t"
,
20
,
20
]
tooltip
Raphael
::
textWrap
=
(
t
,
width
)
->
content
=
t
.
attr
(
"text"
)
abc
=
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
t
.
attr
text
:
abc
letterWidth
=
t
.
getBBox
().
width
/
abc
.
length
t
.
attr
text
:
content
words
=
content
.
split
(
" "
)
x
=
0
s
=
[]
for
word
in
words
if
x
+
(
word
.
length
*
letterWidth
)
>
width
s
.
push
"
\n
"
x
=
0
x
+=
word
.
length
*
letterWidth
s
.
push
word
+
" "
t
.
attr
text
:
s
.
join
(
""
)
b
=
t
.
getBBox
()
h
=
Math
.
abs
(
b
.
y2
)
-
Math
.
abs
(
b
.
y
)
+
1
t
.
attr
y
:
b
.
y
+
h
@
BranchGraph
=
BranchGraph
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment