Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
V
vikus-viewer
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Iterations
Wiki
Requirements
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Package registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
INEL (Open Access)
vikus-viewer
Commits
26a00fb3
Commit
26a00fb3
authored
5 years ago
by
Christopher Pietsch
Browse files
Options
Downloads
Patches
Plain Diff
formating
parent
09faba2f
No related branches found
No related tags found
No related merge requests found
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
js/canvas.js
+957
-930
957 additions, 930 deletions
js/canvas.js
with
957 additions
and
930 deletions
js/canvas.js
+
957
−
930
View file @
26a00fb3
...
@@ -2,13 +2,12 @@
...
@@ -2,13 +2,12 @@
// cpietsch@gmail.com
// cpietsch@gmail.com
// 2015-2018
// 2015-2018
function
Canvas
()
{
function
Canvas
()
{
var
margin
=
{
var
margin
=
{
top
:
20
,
top
:
20
,
right
:
50
,
right
:
50
,
bottom
:
30
,
bottom
:
30
,
left
:
50
left
:
50
,
};
};
var
minHeight
=
400
;
var
minHeight
=
400
;
...
@@ -27,10 +26,12 @@ function Canvas() {
...
@@ -27,10 +26,12 @@ function Canvas() {
var
timeDomain
=
[];
var
timeDomain
=
[];
var
loadImagesCue
=
[];
var
loadImagesCue
=
[];
var
x
=
d3
.
scale
.
ordinal
()
var
x
=
d3
.
scale
.
ordinal
()
.
rangeBands
([
margin
.
left
,
width
+
margin
.
left
],
0.2
);
.
rangeBands
([
margin
.
left
,
width
+
margin
.
left
],
0.2
);
var
Quadtree
=
d3
.
geom
.
quadtree
()
var
Quadtree
=
d3
.
geom
.
quadtree
()
.
x
(
function
(
d
)
{
.
x
(
function
(
d
)
{
return
d
.
x
;
return
d
.
x
;
})
})
...
@@ -42,7 +43,8 @@ function Canvas() {
...
@@ -42,7 +43,8 @@ function Canvas() {
var
maxZoomLevel
=
utils
.
isMobile
()
?
5000
:
2500
;
var
maxZoomLevel
=
utils
.
isMobile
()
?
5000
:
2500
;
var
zoom
=
d3
.
behavior
.
zoom
()
var
zoom
=
d3
.
behavior
.
zoom
()
.
scaleExtent
([
1
,
maxZoomLevel
])
.
scaleExtent
([
1
,
maxZoomLevel
])
.
size
([
width
,
height
])
.
size
([
width
,
height
])
.
on
(
"
zoom
"
,
zoomed
)
.
on
(
"
zoom
"
,
zoomed
)
...
@@ -69,7 +71,7 @@ function Canvas() {
...
@@ -69,7 +71,7 @@ function Canvas() {
var
selectedImage
=
null
;
var
selectedImage
=
null
;
var
drag
=
false
;
var
drag
=
false
;
var
sleep
=
false
var
sleep
=
false
;
var
stagePadding
=
40
;
var
stagePadding
=
40
;
var
imgPadding
;
var
imgPadding
;
...
@@ -80,13 +82,13 @@ function Canvas() {
...
@@ -80,13 +82,13 @@ function Canvas() {
var
touchstart
=
0
;
var
touchstart
=
0
;
var
vizContainer
;
var
vizContainer
;
var
spriteClick
=
false
var
spriteClick
=
false
;
var
state
=
{
var
state
=
{
lastZoomed
:
0
,
lastZoomed
:
0
,
zoomingToImage
:
false
,
zoomingToImage
:
false
,
mode
:
"
time
"
,
mode
:
"
time
"
,
init
:
false
init
:
false
,
};
};
var
zoomedToImage
=
false
;
var
zoomedToImage
=
false
;
...
@@ -97,32 +99,32 @@ function Canvas() {
...
@@ -97,32 +99,32 @@ function Canvas() {
var
startScale
=
0
;
var
startScale
=
0
;
var
cursorCutoff
=
1
;
var
cursorCutoff
=
1
;
var
zooming
=
false
;
var
zooming
=
false
;
var
detailContainer
=
d3
.
select
(
"
.sidebar
"
)
var
detailContainer
=
d3
.
select
(
"
.sidebar
"
)
;
var
timelineData
;
var
timelineData
;
var
stage
,
stage1
,
stage2
,
stage3
,
stage4
,
stage5
;
var
stage
,
stage1
,
stage2
,
stage3
,
stage4
,
stage5
;
var
timelineHover
=
false
;
var
timelineHover
=
false
;
var
tsne
=
[]
var
tsne
=
[]
;
var
tsneIndex
=
{}
var
tsneIndex
=
{}
;
function
canvas
()
{}
function
canvas
()
{}
canvas
.
rangeBand
=
function
()
{
canvas
.
rangeBand
=
function
()
{
return
rangeBand
return
rangeBand
;
}
}
;
canvas
.
width
=
function
()
{
canvas
.
width
=
function
()
{
return
width
return
width
;
}
}
;
canvas
.
height
=
function
()
{
canvas
.
height
=
function
()
{
return
height
return
height
;
}
}
;
canvas
.
rangeBandImage
=
function
()
{
canvas
.
rangeBandImage
=
function
()
{
return
rangeBandImage
return
rangeBandImage
;
}
}
;
canvas
.
zoom
=
zoom
canvas
.
zoom
=
zoom
;
canvas
.
selectedImage
=
function
()
{
canvas
.
selectedImage
=
function
()
{
return
selectedImage
return
selectedImage
;
}
}
;
canvas
.
x
=
x
canvas
.
x
=
x
;
canvas
.
resize
=
function
()
{
canvas
.
resize
=
function
()
{
if
(
!
state
.
init
)
return
;
if
(
!
state
.
init
)
return
;
...
@@ -132,10 +134,10 @@ function Canvas() {
...
@@ -132,10 +134,10 @@ function Canvas() {
renderer
.
resize
(
width
+
margin
.
left
+
margin
.
right
,
height
);
renderer
.
resize
(
width
+
margin
.
left
+
margin
.
right
,
height
);
canvas
.
makeScales
();
canvas
.
makeScales
();
canvas
.
project
();
canvas
.
project
();
}
}
;
canvas
.
makeScales
=
function
()
{
canvas
.
makeScales
=
function
()
{
x
.
rangeBands
([
margin
.
left
,
width
+
margin
.
left
],
0.2
)
x
.
rangeBands
([
margin
.
left
,
width
+
margin
.
left
],
0.2
)
;
rangeBand
=
x
.
rangeBand
();
rangeBand
=
x
.
rangeBand
();
rangeBandImage
=
x
.
rangeBand
()
/
collumns
;
rangeBandImage
=
x
.
rangeBand
()
/
collumns
;
...
@@ -158,19 +160,19 @@ function Canvas() {
...
@@ -158,19 +160,19 @@ function Canvas() {
stage5
.
scale
.
y
=
1
/
scale3
;
stage5
.
scale
.
y
=
1
/
scale3
;
stage5
.
y
=
height
;
stage5
.
y
=
height
;
timeline
.
rescale
(
scale1
)
timeline
.
rescale
(
scale1
)
;
cursorCutoff
=
1
/
scale1
*
imageSize
*
0.48
cursorCutoff
=
(
1
/
scale1
)
*
imageSize
*
0.48
;
zoomedToImageScale
=
0.8
/
(
x
.
rangeBand
()
/
collumns
/
width
)
zoomedToImageScale
=
0.8
/
(
x
.
rangeBand
()
/
collumns
/
width
)
;
// console.log("zoomedToImageScale", zoomedToImageScale)
// console.log("zoomedToImageScale", zoomedToImageScale)
}
}
;
canvas
.
init
=
function
(
_data
,
_timeline
,
_config
)
{
canvas
.
init
=
function
(
_data
,
_timeline
,
_config
)
{
data
=
_data
;
data
=
_data
;
config
=
_config
;
config
=
_config
;
container
=
d3
.
select
(
"
.page
"
).
append
(
"
div
"
).
classed
(
"
viz
"
,
true
);
container
=
d3
.
select
(
"
.page
"
).
append
(
"
div
"
).
classed
(
"
viz
"
,
true
);
detailVue
.
_data
.
structure
=
config
.
detail
.
structure
detailVue
.
_data
.
structure
=
config
.
detail
.
structure
;
collumns
=
config
.
projection
.
columns
;
collumns
=
config
.
projection
.
columns
;
imageSize
=
config
.
loader
.
textures
.
medium
.
size
;
imageSize
=
config
.
loader
.
textures
.
medium
.
size
;
...
@@ -181,14 +183,24 @@ function Canvas() {
...
@@ -181,14 +183,24 @@ function Canvas() {
}
}
PIXI
.
settings
.
SCALE_MODE
=
1
;
PIXI
.
settings
.
SCALE_MODE
=
1
;
PIXI
.
settings
.
SPRITE_MAX_TEXTURES
=
Math
.
min
(
PIXI
.
settings
.
SPRITE_MAX_TEXTURES
,
16
);
PIXI
.
settings
.
SPRITE_MAX_TEXTURES
=
Math
.
min
(
PIXI
.
settings
.
SPRITE_MAX_TEXTURES
,
16
);
var
renderOptions
=
{
var
renderOptions
=
{
resolution
:
1
,
resolution
:
1
,
antialiasing
:
false
antialiasing
:
false
,
};
};
renderer
=
new
PIXI
.
WebGLRenderer
(
width
+
margin
.
left
+
margin
.
right
,
height
,
renderOptions
);
renderer
=
new
PIXI
.
WebGLRenderer
(
renderer
.
backgroundColor
=
parseInt
(
config
.
style
.
canvasBackground
.
substring
(
1
),
16
)
width
+
margin
.
left
+
margin
.
right
,
height
,
renderOptions
);
renderer
.
backgroundColor
=
parseInt
(
config
.
style
.
canvasBackground
.
substring
(
1
),
16
);
window
.
renderer
=
renderer
;
window
.
renderer
=
renderer
;
var
renderElem
=
d3
.
select
(
container
.
node
().
appendChild
(
renderer
.
view
));
var
renderElem
=
d3
.
select
(
container
.
node
().
appendChild
(
renderer
.
view
));
...
@@ -208,7 +220,8 @@ function Canvas() {
...
@@ -208,7 +220,8 @@ function Canvas() {
d
.
type
=
"
timeline
"
;
d
.
type
=
"
timeline
"
;
});
});
var
canvasDomain
=
d3
.
nest
()
var
canvasDomain
=
d3
.
nest
()
.
key
(
function
(
d
)
{
.
key
(
function
(
d
)
{
return
d
.
year
;
return
d
.
year
;
})
})
...
@@ -218,18 +231,18 @@ function Canvas() {
...
@@ -218,18 +231,18 @@ function Canvas() {
})
})
.
map
(
function
(
d
)
{
.
map
(
function
(
d
)
{
return
d
.
key
;
return
d
.
key
;
})
})
;
timeDomain
=
canvasDomain
.
map
(
function
(
d
)
{
timeDomain
=
canvasDomain
.
map
(
function
(
d
)
{
return
{
return
{
key
:
d
,
key
:
d
,
values
:
_timeline
.
filter
(
function
(
e
)
{
values
:
_timeline
.
filter
(
function
(
e
)
{
return
d
==
e
.
year
;
return
d
==
e
.
year
;
})
})
,
}
}
;
})
})
;
timeline
.
init
(
timeDomain
)
timeline
.
init
(
timeDomain
)
;
x
.
domain
(
canvasDomain
);
x
.
domain
(
canvasDomain
);
canvas
.
makeScales
();
canvas
.
makeScales
();
...
@@ -247,11 +260,10 @@ function Canvas() {
...
@@ -247,11 +260,10 @@ function Canvas() {
d
.
sprite
=
sprite
;
d
.
sprite
=
sprite
;
stage3
.
addChild
(
sprite
);
stage3
.
addChild
(
sprite
);
});
})
vizContainer
=
d3
.
select
(
"
.viz
"
)
vizContainer
=
d3
.
select
(
"
.viz
"
)
.
call
(
zoom
)
.
call
(
zoom
)
.
on
(
"
mousemove
"
,
mousemove
)
.
on
(
"
mousemove
"
,
mousemove
)
.
on
(
"
dblclick.zoom
"
,
null
)
.
on
(
"
dblclick.zoom
"
,
null
)
...
@@ -260,14 +272,14 @@ function Canvas() {
...
@@ -260,14 +272,14 @@ function Canvas() {
touchstart
=
new
Date
()
*
1
;
touchstart
=
new
Date
()
*
1
;
})
})
.
on
(
"
touchend
"
,
function
(
d
)
{
.
on
(
"
touchend
"
,
function
(
d
)
{
var
touchtime
=
(
new
Date
()
*
1
)
-
touchstart
;
var
touchtime
=
new
Date
()
*
1
-
touchstart
;
if
(
touchtime
>
250
)
return
;
if
(
touchtime
>
250
)
return
;
if
(
selectedImageDistance
>
15
)
return
;
if
(
selectedImageDistance
>
15
)
return
;
if
(
selectedImage
&&
!
selectedImage
.
id
)
return
;
if
(
selectedImage
&&
!
selectedImage
.
id
)
return
;
if
(
selectedImage
&&
!
selectedImage
.
active
)
return
;
if
(
selectedImage
&&
!
selectedImage
.
active
)
return
;
if
(
drag
)
return
;
if
(
drag
)
return
;
zoomToImage
(
selectedImage
,
1400
/
Math
.
sqrt
(
Math
.
sqrt
(
scale
)))
zoomToImage
(
selectedImage
,
1400
/
Math
.
sqrt
(
Math
.
sqrt
(
scale
)))
;
})
})
.
on
(
"
click
"
,
function
()
{
.
on
(
"
click
"
,
function
()
{
console
.
log
(
"
click
"
);
console
.
log
(
"
click
"
);
...
@@ -288,8 +300,7 @@ function Canvas() {
...
@@ -288,8 +300,7 @@ function Canvas() {
}
else
{
}
else
{
zoomToImage
(
selectedImage
,
1400
/
Math
.
sqrt
(
Math
.
sqrt
(
scale
)));
zoomToImage
(
selectedImage
,
1400
/
Math
.
sqrt
(
Math
.
sqrt
(
scale
)));
}
}
});
})
canvas
.
project
();
canvas
.
project
();
animate
();
animate
();
...
@@ -300,34 +311,30 @@ function Canvas() {
...
@@ -300,34 +311,30 @@ function Canvas() {
};
};
canvas
.
addTsneData
=
function
(
d
)
{
canvas
.
addTsneData
=
function
(
d
)
{
console
.
time
(
"
tsne
"
)
console
.
time
(
"
tsne
"
)
;
var
clean
=
d
.
map
(
function
(
d
)
{
var
clean
=
d
.
map
(
function
(
d
)
{
return
{
return
{
id
:
d
.
id
,
id
:
d
.
id
,
x
:
parseFloat
(
d
.
x
),
x
:
parseFloat
(
d
.
x
),
y
:
parseFloat
(
d
.
y
)
y
:
parseFloat
(
d
.
y
)
,
}
}
;
})
})
;
var
xExtent
=
d3
.
extent
(
clean
,
function
(
d
)
{
var
xExtent
=
d3
.
extent
(
clean
,
function
(
d
)
{
return
d
.
x
return
d
.
x
;
})
})
;
var
yExtent
=
d3
.
extent
(
clean
,
function
(
d
)
{
var
yExtent
=
d3
.
extent
(
clean
,
function
(
d
)
{
return
d
.
y
return
d
.
y
;
})
})
;
var
x
=
d3
.
scale
.
linear
().
range
([
0
,
1
]).
domain
(
xExtent
)
var
x
=
d3
.
scale
.
linear
().
range
([
0
,
1
]).
domain
(
xExtent
)
;
var
y
=
d3
.
scale
.
linear
().
range
([
0
,
1
]).
domain
(
yExtent
)
var
y
=
d3
.
scale
.
linear
().
range
([
0
,
1
]).
domain
(
yExtent
)
;
d
.
forEach
(
function
(
d
)
{
d
.
forEach
(
function
(
d
)
{
tsneIndex
[
d
.
id
]
=
[
tsneIndex
[
d
.
id
]
=
[
x
(
d
.
x
),
y
(
d
.
y
)];
x
(
d
.
x
),
});
y
(
d
.
y
)
]
})
console
.
timeEnd
(
"
tsne
"
)
}
console
.
timeEnd
(
"
tsne
"
);
};
function
mousemove
(
d
)
{
function
mousemove
(
d
)
{
if
(
timelineHover
)
return
;
if
(
timelineHover
)
return
;
...
@@ -335,12 +342,17 @@ function Canvas() {
...
@@ -335,12 +342,17 @@ function Canvas() {
var
mouse
=
d3
.
mouse
(
vizContainer
.
node
());
var
mouse
=
d3
.
mouse
(
vizContainer
.
node
());
var
p
=
toScreenPoint
(
mouse
);
var
p
=
toScreenPoint
(
mouse
);
var
distance
=
200
var
distance
=
200
;
var
best
=
nearest
(
p
[
0
]
-
imgPadding
,
p
[
1
]
-
imgPadding
,
{
var
best
=
nearest
(
p
[
0
]
-
imgPadding
,
p
[
1
]
-
imgPadding
,
{
d
:
distance
,
d
:
distance
,
p
:
null
p
:
null
,
},
quadtree
);
},
quadtree
);
selectedImageDistance
=
best
.
d
;
selectedImageDistance
=
best
.
d
;
// console.log(cursorCutoff,scale, scale1, selectedImageDistance)
// console.log(cursorCutoff,scale, scale1, selectedImageDistance)
...
@@ -352,39 +364,42 @@ function Canvas() {
...
@@ -352,39 +364,42 @@ function Canvas() {
}
else
{
}
else
{
if
(
best
.
p
&&
!
zoomedToImage
)
{
if
(
best
.
p
&&
!
zoomedToImage
)
{
var
d
=
best
.
p
;
var
d
=
best
.
p
;
var
center
=
[((
d
.
x
+
imgPadding
)
*
scale
)
+
translate
[
0
],
(
height
+
d
.
y
+
imgPadding
)
*
scale
+
translate
[
1
]];
var
center
=
[
(
d
.
x
+
imgPadding
)
*
scale
+
translate
[
0
],
(
height
+
d
.
y
+
imgPadding
)
*
scale
+
translate
[
1
],
];
zoom
.
center
(
center
);
zoom
.
center
(
center
);
selectedImage
=
d
;
selectedImage
=
d
;
}
}
container
.
style
(
"
cursor
"
,
function
()
{
container
.
style
(
"
cursor
"
,
function
()
{
return
((
selectedImageDistance
<
cursorCutoff
)
&&
selectedImage
.
active
)
?
"
pointer
"
:
"
default
"
;
return
selectedImageDistance
<
cursorCutoff
&&
selectedImage
.
active
?
"
pointer
"
:
"
default
"
;
});
});
}
}
}
}
function
stackLayout
(
data
,
invert
)
{
function
stackLayout
(
data
,
invert
)
{
var
years
=
d3
var
years
=
d3
.
nest
()
.
nest
()
.
key
(
function
(
d
)
{
.
key
(
function
(
d
)
{
return
d
.
year
;
return
d
.
year
;
})
})
.
entries
(
data
)
.
entries
(
data
)
;
years
.
forEach
(
function
(
year
)
{
years
.
forEach
(
function
(
year
)
{
var
startX
=
x
(
year
.
key
);
var
startX
=
x
(
year
.
key
);
var
total
=
year
.
values
.
length
;
var
total
=
year
.
values
.
length
;
year
.
values
.
sort
(
function
(
a
,
b
)
{
year
.
values
.
sort
(
function
(
a
,
b
)
{
return
b
.
keywords
.
length
-
a
.
keywords
.
length
;
return
b
.
keywords
.
length
-
a
.
keywords
.
length
;
})
})
;
year
.
values
.
forEach
(
function
(
d
,
i
)
{
year
.
values
.
forEach
(
function
(
d
,
i
)
{
var
row
=
(
Math
.
floor
(
i
/
collumns
)
+
2
)
;
var
row
=
Math
.
floor
(
i
/
collumns
)
+
2
;
d
.
ii
=
i
;
d
.
ii
=
i
;
d
.
x
=
startX
+
(
(
i
%
collumns
)
*
(
rangeBand
/
collumns
)
)
;
d
.
x
=
startX
+
(
i
%
collumns
)
*
(
rangeBand
/
collumns
);
d
.
y
=
(
invert
?
1
:
-
1
)
*
(
row
*
(
rangeBand
/
collumns
));
d
.
y
=
(
invert
?
1
:
-
1
)
*
(
row
*
(
rangeBand
/
collumns
));
d
.
x1
=
d
.
x
*
scale1
+
imageSize
/
2
;
d
.
x1
=
d
.
x
*
scale1
+
imageSize
/
2
;
...
@@ -401,52 +416,54 @@ function Canvas() {
...
@@ -401,52 +416,54 @@ function Canvas() {
}
}
d
.
order
=
(
invert
?
1
:
1
)
*
(
total
-
i
);
d
.
order
=
(
invert
?
1
:
1
)
*
(
total
-
i
);
})
})
;
})
})
;
}
}
canvas
.
distance
=
function
(
a
,
b
)
{
canvas
.
distance
=
function
(
a
,
b
)
{
return
Math
.
sqrt
((
a
[
0
]
-
b
[
0
])
*
(
a
[
0
]
-
b
[
0
])
+
(
a
[
1
]
-
b
[
1
])
*
(
a
[
1
]
-
b
[
1
]));
return
Math
.
sqrt
(
}
(
a
[
0
]
-
b
[
0
])
*
(
a
[
0
]
-
b
[
0
])
+
(
a
[
1
]
-
b
[
1
])
*
(
a
[
1
]
-
b
[
1
])
);
};
function
toScreenPoint
(
p
)
{
function
toScreenPoint
(
p
)
{
var
p2
=
[
0
,
0
];
var
p2
=
[
0
,
0
];
p2
[
0
]
=
p
[
0
]
/
scale
-
translate
[
0
]
/
scale
;
p2
[
0
]
=
p
[
0
]
/
scale
-
translate
[
0
]
/
scale
;
p2
[
1
]
=
(
p
[
1
]
/
scale
-
height
)
-
translate
[
1
]
/
scale
;
p2
[
1
]
=
p
[
1
]
/
scale
-
height
-
translate
[
1
]
/
scale
;
return
p2
;
return
p2
;
}
}
function
imageAnimation
()
{
function
imageAnimation
()
{
var
sleep
=
true
var
sleep
=
true
;
data
.
forEach
(
function
(
d
,
i
)
{
data
.
forEach
(
function
(
d
,
i
)
{
var
diff
;
var
diff
;
diff
=
(
d
.
x1
-
d
.
sprite
.
position
.
x
)
;
diff
=
d
.
x1
-
d
.
sprite
.
position
.
x
;
if
(
Math
.
abs
(
diff
)
>
0.1
)
{
if
(
Math
.
abs
(
diff
)
>
0.1
)
{
d
.
sprite
.
position
.
x
+=
diff
*
0.1
;
d
.
sprite
.
position
.
x
+=
diff
*
0.1
;
sleep
=
false
;
sleep
=
false
;
}
}
diff
=
(
d
.
y1
-
d
.
sprite
.
position
.
y
)
;
diff
=
d
.
y1
-
d
.
sprite
.
position
.
y
;
if
(
Math
.
abs
(
diff
)
>
0.1
)
{
if
(
Math
.
abs
(
diff
)
>
0.1
)
{
d
.
sprite
.
position
.
y
+=
diff
*
0.1
d
.
sprite
.
position
.
y
+=
diff
*
0.1
;
sleep
=
false
;
sleep
=
false
;
}
}
diff
=
(
d
.
alpha
-
d
.
sprite
.
alpha
)
;
diff
=
d
.
alpha
-
d
.
sprite
.
alpha
;
if
(
Math
.
abs
(
diff
)
>
0.01
)
{
if
(
Math
.
abs
(
diff
)
>
0.01
)
{
d
.
sprite
.
alpha
+=
diff
*
0.2
d
.
sprite
.
alpha
+=
diff
*
0.2
;
sleep
=
false
;
sleep
=
false
;
}
}
d
.
sprite
.
visible
=
d
.
sprite
.
alpha
>
0.1
;
d
.
sprite
.
visible
=
d
.
sprite
.
alpha
>
0.1
;
if
(
d
.
sprite2
)
{
if
(
d
.
sprite2
)
{
diff
=
(
d
.
alpha2
-
d
.
sprite2
.
alpha
)
;
diff
=
d
.
alpha2
-
d
.
sprite2
.
alpha
;
if
(
Math
.
abs
(
diff
)
>
0.01
)
{
if
(
Math
.
abs
(
diff
)
>
0.01
)
{
d
.
sprite2
.
alpha
+=
diff
*
0.2
d
.
sprite2
.
alpha
+=
diff
*
0.2
;
sleep
=
false
;
sleep
=
false
;
}
}
...
@@ -454,38 +471,37 @@ function Canvas() {
...
@@ -454,38 +471,37 @@ function Canvas() {
//else d.sprite2.visible = d.visible;
//else d.sprite2.visible = d.visible;
}
}
});
});
return
sleep
return
sleep
;
}
}
canvas
.
wakeup
=
function
()
{
canvas
.
wakeup
=
function
()
{
sleep
=
false
sleep
=
false
;
}
}
;
canvas
.
setMode
=
function
(
mode
)
{
canvas
.
setMode
=
function
(
mode
)
{
state
.
mode
=
mode
state
.
mode
=
mode
;
canvas
.
project
()
canvas
.
project
()
;
}
}
;
function
animate
(
time
)
{
function
animate
(
time
)
{
requestAnimationFrame
(
animate
);
requestAnimationFrame
(
animate
);
loadImages
();
loadImages
();
if
(
sleep
)
return
if
(
sleep
)
return
;
sleep
=
imageAnimation
();
sleep
=
imageAnimation
();
renderer
.
render
(
stage
);
renderer
.
render
(
stage
);
}
}
function
zoomToYear
(
d
)
{
function
zoomToYear
(
d
)
{
var
xYear
=
x
(
d
.
year
);
var
xYear
=
x
(
d
.
year
);
var
scale
=
1
/
(
rangeBand
*
4
/
width
);
var
scale
=
1
/
(
(
rangeBand
*
4
)
/
width
);
var
padding
=
rangeBand
*
1.5
var
padding
=
rangeBand
*
1.5
;
var
translateNow
=
[
-
scale
*
(
xYear
-
padding
),
-
scale
*
(
height
+
d
.
y
)];
var
translateNow
=
[
-
scale
*
(
xYear
-
padding
),
-
scale
*
(
height
+
d
.
y
)];
vizContainer
vizContainer
.
call
(
zoom
.
translate
(
translate
).
event
)
.
call
(
zoom
.
translate
(
translate
).
event
)
.
transition
().
duration
(
2000
)
.
transition
()
.
call
(
zoom
.
scale
(
scale
).
translate
(
translateNow
).
event
)
.
duration
(
2000
)
.
call
(
zoom
.
scale
(
scale
).
translate
(
translateNow
).
event
);
}
}
function
zoomToImage
(
d
,
duration
)
{
function
zoomToImage
(
d
,
duration
)
{
...
@@ -496,7 +512,10 @@ function Canvas() {
...
@@ -496,7 +512,10 @@ function Canvas() {
var
padding
=
x
.
rangeBand
()
/
collumns
/
2
;
var
padding
=
x
.
rangeBand
()
/
collumns
/
2
;
var
sidbar
=
width
/
8
;
var
sidbar
=
width
/
8
;
var
scale
=
0.8
/
(
x
.
rangeBand
()
/
collumns
/
width
);
var
scale
=
0.8
/
(
x
.
rangeBand
()
/
collumns
/
width
);
var
translateNow
=
[(
-
scale
*
(
d
.
x
-
padding
/
2
))
-
sidbar
,
-
scale
*
(
height
+
d
.
y
)];
var
translateNow
=
[
-
scale
*
(
d
.
x
-
padding
/
2
)
-
sidbar
,
-
scale
*
(
height
+
d
.
y
),
];
zoomedToImageScale
=
scale
;
zoomedToImageScale
=
scale
;
...
@@ -506,7 +525,8 @@ function Canvas() {
...
@@ -506,7 +525,8 @@ function Canvas() {
vizContainer
vizContainer
.
call
(
zoom
.
translate
(
translate
).
event
)
.
call
(
zoom
.
translate
(
translate
).
event
)
.
transition
().
duration
(
duration
)
.
transition
()
.
duration
(
duration
)
.
call
(
zoom
.
scale
(
scale
).
translate
(
translateNow
).
event
)
.
call
(
zoom
.
scale
(
scale
).
translate
(
translateNow
).
event
)
.
each
(
"
end
"
,
function
()
{
.
each
(
"
end
"
,
function
()
{
zoomedToImage
=
true
;
zoomedToImage
=
true
;
...
@@ -515,91 +535,88 @@ function Canvas() {
...
@@ -515,91 +535,88 @@ function Canvas() {
showDetail
(
d
);
showDetail
(
d
);
loadBigImage
(
d
,
"
click
"
);
loadBigImage
(
d
,
"
click
"
);
state
.
zoomingToImage
=
false
;
state
.
zoomingToImage
=
false
;
})
})
;
}
}
function
showDetail
(
d
)
{
function
showDetail
(
d
)
{
// console.log("show detail", d)
// console.log("show detail", d)
detailContainer
detailContainer
.
select
(
"
.outer
"
).
node
().
scrollTop
=
0
;
.
select
(
"
.outer
"
)
.
node
()
.
scrollTop
=
0
;
detailContainer
detailContainer
.
classed
(
"
hide
"
,
false
).
classed
(
"
sneak
"
,
utils
.
isMobile
());
.
classed
(
"
hide
"
,
false
)
.
classed
(
"
sneak
"
,
utils
.
isMobile
())
// needs to be done better
// needs to be done better
var
detailData
=
{}
var
detailData
=
{}
;
for
(
field
in
selectedImage
)
{
for
(
field
in
selectedImage
)
{
if
(
field
[
0
]
===
'
_
'
)
detailData
[
field
]
=
selectedImage
[
field
]
if
(
field
[
0
]
===
"
_
"
)
detailData
[
field
]
=
selectedImage
[
field
]
;
}
}
detailData
[
'
_id
'
]
=
selectedImage
.
id
detailData
[
"
_id
"
]
=
selectedImage
.
id
;
detailData
[
'
_keywords
'
]
=
selectedImage
.
keywords
detailData
[
"
_keywords
"
]
=
selectedImage
.
keywords
;
detailData
[
'
_year
'
]
=
selectedImage
.
year
detailData
[
"
_year
"
]
=
selectedImage
.
year
;
detailData
[
'
_imagenum
'
]
=
selectedImage
.
imagenum
||
1
detailData
[
"
_imagenum
"
]
=
selectedImage
.
imagenum
||
1
;
detailVue
.
_data
.
item
=
detailData
detailVue
.
_data
.
item
=
detailData
;
detailVue
.
_data
.
id
=
d
.
id
detailVue
.
_data
.
id
=
d
.
id
;
detailVue
.
_data
.
page
=
d
.
page
detailVue
.
_data
.
page
=
d
.
page
;
}
}
canvas
.
changePage
=
function
(
id
,
page
)
{
canvas
.
changePage
=
function
(
id
,
page
)
{
console
.
log
(
"
changePage
"
,
id
,
page
,
selectedImage
);
console
.
log
(
"
changePage
"
,
id
,
page
,
selectedImage
);
selectedImage
.
page
=
page
selectedImage
.
page
=
page
;
detailVue
.
_data
.
page
=
page
detailVue
.
_data
.
page
=
page
;
clearBigImages
();
clearBigImages
();
loadBigImage
(
selectedImage
)
loadBigImage
(
selectedImage
);
}
};
function
hideTheRest
(
d
)
{
function
hideTheRest
(
d
)
{
data
.
forEach
(
function
(
d2
)
{
data
.
forEach
(
function
(
d2
)
{
if
(
d2
.
id
!==
d
.
id
)
{
if
(
d2
.
id
!==
d
.
id
)
{
d2
.
alpha
=
0
;
d2
.
alpha
=
0
;
d2
.
alpha2
=
0
;
d2
.
alpha2
=
0
;
}
}
})
})
;
}
}
function
showAllImages
()
{
function
showAllImages
()
{
data
.
forEach
(
function
(
d
)
{
data
.
forEach
(
function
(
d
)
{
d
.
alpha
=
d
.
active
?
1
:
0.2
;
;
d
.
alpha
=
d
.
active
?
1
:
0.2
;
d
.
alpha2
=
d
.
visible
?
1
:
0
;
d
.
alpha2
=
d
.
visible
?
1
:
0
;
})
})
;
}
}
function
zoomed
()
{
function
zoomed
()
{
translate
=
d3
.
event
.
translate
;
translate
=
d3
.
event
.
translate
;
scale
=
d3
.
event
.
scale
;
scale
=
d3
.
event
.
scale
;
if
(
!
startTranslate
)
startTranslate
=
translate
if
(
!
startTranslate
)
startTranslate
=
translate
;
drag
=
startTranslate
&&
translate
!==
startTranslate
;
drag
=
startTranslate
&&
translate
!==
startTranslate
;
// check borders
// check borders
var
x1
=
-
1
*
translate
[
0
]
/
scale
;
var
x1
=
(
-
1
*
translate
[
0
]
)
/
scale
;
var
x2
=
(
x1
+
(
widthOuter
/
scale
))
;
var
x2
=
x1
+
widthOuter
/
scale
;
if
(
d3
.
event
.
sourceEvent
!=
null
)
{
if
(
d3
.
event
.
sourceEvent
!=
null
)
{
if
(
x1
<
0
)
{
if
(
x1
<
0
)
{
translate
[
0
]
=
0
;
translate
[
0
]
=
0
;
}
else
if
(
x2
>
widthOuter
)
{
}
else
if
(
x2
>
widthOuter
)
{
translate
[
0
]
=
(
(
widthOuter
*
scale
)
-
widthOuter
)
*
-
1
;
translate
[
0
]
=
(
widthOuter
*
scale
-
widthOuter
)
*
-
1
;
}
}
zoom
.
translate
([
translate
[
0
],
translate
[
1
]]);
zoom
.
translate
([
translate
[
0
],
translate
[
1
]]);
x1
=
-
1
*
translate
[
0
]
/
scale
;
x1
=
(
-
1
*
translate
[
0
]
)
/
scale
;
x2
=
(
x1
+
(
width
/
scale
))
x2
=
x1
+
width
/
scale
;
}
}
if
(
zoomedToImageScale
!=
0
&&
scale
>
zoomedToImageScale
*
0.9
&&
!
zoomedToImage
&&
selectedImage
&&
selectedImage
.
type
==
"
image
"
)
{
if
(
zoomedToImageScale
!=
0
&&
scale
>
zoomedToImageScale
*
0.9
&&
!
zoomedToImage
&&
selectedImage
&&
selectedImage
.
type
==
"
image
"
)
{
zoomedToImage
=
true
;
zoomedToImage
=
true
;
zoom
.
center
(
null
);
zoom
.
center
(
null
);
zoomedToImageScale
=
scale
;
zoomedToImageScale
=
scale
;
hideTheRest
(
selectedImage
);
hideTheRest
(
selectedImage
);
showDetail
(
selectedImage
)
showDetail
(
selectedImage
)
;
}
}
if
(
zoomedToImage
&&
zoomedToImageScale
*
0.8
>
scale
)
{
if
(
zoomedToImage
&&
zoomedToImageScale
*
0.8
>
scale
)
{
...
@@ -608,7 +625,7 @@ function Canvas() {
...
@@ -608,7 +625,7 @@ function Canvas() {
state
.
lastZoomed
=
0
;
state
.
lastZoomed
=
0
;
showAllImages
();
showAllImages
();
clearBigImages
();
clearBigImages
();
detailContainer
.
classed
(
"
hide
"
,
true
)
detailContainer
.
classed
(
"
hide
"
,
true
)
;
}
}
timeline
.
update
(
x1
,
x2
,
scale
,
translate
,
scale1
);
timeline
.
update
(
x1
,
x2
,
scale
,
translate
,
scale1
);
...
@@ -623,19 +640,18 @@ function Canvas() {
...
@@ -623,19 +640,18 @@ function Canvas() {
d3
.
select
(
"
.searchbar
"
).
classed
(
"
hide
"
,
false
);
d3
.
select
(
"
.searchbar
"
).
classed
(
"
hide
"
,
false
);
}
}
stage2
.
scale
.
x
=
d3
.
event
.
scale
;
stage2
.
scale
.
x
=
d3
.
event
.
scale
;
stage2
.
scale
.
y
=
d3
.
event
.
scale
;
stage2
.
scale
.
y
=
d3
.
event
.
scale
;
stage2
.
x
=
d3
.
event
.
translate
[
0
];
stage2
.
x
=
d3
.
event
.
translate
[
0
];
stage2
.
y
=
d3
.
event
.
translate
[
1
];
stage2
.
y
=
d3
.
event
.
translate
[
1
];
sleep
=
false
sleep
=
false
;
}
}
function
zoomstart
(
d
)
{
function
zoomstart
(
d
)
{
zooming
=
true
;
zooming
=
true
;
startTranslate
=
false
;
startTranslate
=
false
;
drag
=
false
drag
=
false
;
startScale
=
scale
;
startScale
=
scale
;
}
}
...
@@ -644,7 +660,12 @@ function Canvas() {
...
@@ -644,7 +660,12 @@ function Canvas() {
zooming
=
false
;
zooming
=
false
;
filterVisible
();
filterVisible
();
if
(
zoomedToImage
&&
!
selectedImage
.
big
&&
state
.
lastZoomed
!=
selectedImage
.
id
&&
!
state
.
zoomingToImage
)
{
if
(
zoomedToImage
&&
!
selectedImage
.
big
&&
state
.
lastZoomed
!=
selectedImage
.
id
&&
!
state
.
zoomingToImage
)
{
loadBigImage
(
selectedImage
,
"
zoom
"
);
loadBigImage
(
selectedImage
,
"
zoom
"
);
}
}
}
}
...
@@ -654,7 +675,7 @@ function Canvas() {
...
@@ -654,7 +675,7 @@ function Canvas() {
d
.
alpha
=
d
.
highlight
?
1
:
0.2
;
d
.
alpha
=
d
.
highlight
?
1
:
0.2
;
});
});
canvas
.
wakeup
();
canvas
.
wakeup
();
}
}
;
// canvas.project = function () {
// canvas.project = function () {
// sleep = false
// sleep = false
...
@@ -663,17 +684,16 @@ function Canvas() {
...
@@ -663,17 +684,16 @@ function Canvas() {
// }
// }
canvas
.
project
=
function
()
{
canvas
.
project
=
function
()
{
sleep
=
false
sleep
=
false
;
if
(
state
.
mode
==
"
tsne
"
)
{
if
(
state
.
mode
==
"
tsne
"
)
{
canvas
.
projectTSNE
();
canvas
.
projectTSNE
();
}
else
{
}
else
{
canvas
.
split
();
canvas
.
split
();
}
}
canvas
.
resetZoom
();
canvas
.
resetZoom
();
}
}
;
canvas
.
projectTSNE
=
function
()
{
canvas
.
projectTSNE
=
function
()
{
var
marginBottom
=
-
height
/
2.5
;
var
marginBottom
=
-
height
/
2.5
;
var
inactive
=
data
.
filter
(
function
(
d
)
{
var
inactive
=
data
.
filter
(
function
(
d
)
{
...
@@ -689,7 +709,7 @@ function Canvas() {
...
@@ -689,7 +709,7 @@ function Canvas() {
// return a.rTSNE - b.rTSNE
// return a.rTSNE - b.rTSNE
// });
// });
var
dimension
=
Math
.
min
(
width
,
height
)
*
0.8
var
dimension
=
Math
.
min
(
width
,
height
)
*
0.8
;
inactive
.
forEach
(
function
(
d
,
i
)
{
inactive
.
forEach
(
function
(
d
,
i
)
{
var
r
=
dimension
/
1.9
+
Math
.
random
()
*
40
;
var
r
=
dimension
/
1.9
+
Math
.
random
()
*
40
;
...
@@ -700,19 +720,17 @@ function Canvas() {
...
@@ -700,19 +720,17 @@ function Canvas() {
});
});
active
.
forEach
(
function
(
d
)
{
active
.
forEach
(
function
(
d
)
{
var
factor
=
height
/
2
;
var
factor
=
height
/
2
;
var
tsneEntry
=
tsneIndex
[
d
.
id
]
var
tsneEntry
=
tsneIndex
[
d
.
id
]
;
if
(
tsneEntry
)
{
if
(
tsneEntry
)
{
d
.
x
=
(
tsneEntry
[
0
]
*
dimension
)
+
width
/
2
-
dimension
/
2
+
margin
.
left
;
d
.
x
=
d
.
y
=
(
tsneEntry
[
1
]
*
dimension
)
-
dimension
/
2
+
marginBottom
;
tsneEntry
[
0
]
*
dimension
+
width
/
2
-
dimension
/
2
+
margin
.
left
;
d
.
y
=
tsneEntry
[
1
]
*
dimension
-
dimension
/
2
+
marginBottom
;
}
}
// var tsneEntry = tsne.find(function (t) {
// var tsneEntry = tsne.find(function (t) {
// return t.id == d.id
// return t.id == d.id
// })
// })
});
})
data
.
forEach
(
function
(
d
)
{
data
.
forEach
(
function
(
d
)
{
d
.
x1
=
d
.
x
*
scale1
+
imageSize
/
2
;
d
.
x1
=
d
.
x
*
scale1
+
imageSize
/
2
;
...
@@ -729,12 +747,9 @@ function Canvas() {
...
@@ -729,12 +747,9 @@ function Canvas() {
}
}
});
});
quadtree
=
Quadtree
(
data
);
quadtree
=
Quadtree
(
data
);
//chart.resetZoom();
//chart.resetZoom();
};
}
canvas
.
resetZoom
=
function
()
{
canvas
.
resetZoom
=
function
()
{
var
duration
=
1400
;
var
duration
=
1400
;
...
@@ -744,25 +759,26 @@ function Canvas() {
...
@@ -744,25 +759,26 @@ function Canvas() {
});
});
var
y
=
-
extent
[
1
]
-
bottomPadding
;
var
y
=
-
extent
[
1
]
-
bottomPadding
;
y
=
(
extent
[
1
]
/
-
3
)
-
bottomPadding
y
=
extent
[
1
]
/
-
3
-
bottomPadding
;
vizContainer
vizContainer
.
call
(
zoom
.
translate
(
translate
).
event
)
.
call
(
zoom
.
translate
(
translate
).
event
)
.
transition
().
duration
(
duration
)
.
transition
()
.
call
(
zoom
.
translate
([
0
,
y
]).
scale
(
1
).
event
)
.
duration
(
duration
)
}
.
call
(
zoom
.
translate
([
0
,
y
]).
scale
(
1
).
event
);
};
canvas
.
split
=
function
()
{
canvas
.
split
=
function
()
{
var
active
=
data
.
filter
(
function
(
d
)
{
var
active
=
data
.
filter
(
function
(
d
)
{
return
d
.
active
;
return
d
.
active
;
})
})
;
stackLayout
(
active
,
false
);
stackLayout
(
active
,
false
);
var
inactive
=
data
.
filter
(
function
(
d
)
{
var
inactive
=
data
.
filter
(
function
(
d
)
{
return
!
d
.
active
;
return
!
d
.
active
;
})
})
;
stackLayout
(
inactive
,
true
);
stackLayout
(
inactive
,
true
);
quadtree
=
Quadtree
(
data
);
quadtree
=
Quadtree
(
data
);
}
}
;
function
filterVisible
()
{
function
filterVisible
()
{
var
zoomScale
=
scale
;
var
zoomScale
=
scale
;
...
@@ -770,11 +786,16 @@ function Canvas() {
...
@@ -770,11 +786,16 @@ function Canvas() {
data
.
forEach
(
function
(
d
,
i
)
{
data
.
forEach
(
function
(
d
,
i
)
{
var
p
=
d
.
sprite
.
position
;
var
p
=
d
.
sprite
.
position
;
var
x
=
(
p
.
x
/
scale1
)
+
translate
[
0
]
/
zoomScale
;
var
x
=
p
.
x
/
scale1
+
translate
[
0
]
/
zoomScale
;
var
y
=
((
p
.
y
/
scale1
)
+
(
translate
[
1
]
)
/
zoomScale
)
;
var
y
=
p
.
y
/
scale1
+
translate
[
1
]
/
zoomScale
;
var
padding
=
5
;
var
padding
=
5
;
if
(
x
>
(
-
padding
)
&&
x
<
((
width
/
zoomScale
)
+
padding
)
&&
y
+
height
<
(
height
/
zoomScale
+
padding
)
&&
y
>
(
height
*
-
1
)
-
padding
)
{
if
(
x
>
-
padding
&&
x
<
width
/
zoomScale
+
padding
&&
y
+
height
<
height
/
zoomScale
+
padding
&&
y
>
height
*
-
1
-
padding
)
{
d
.
visible
=
true
;
d
.
visible
=
true
;
}
else
{
}
else
{
d
.
visible
=
false
;
d
.
visible
=
false
;
...
@@ -790,11 +811,11 @@ function Canvas() {
...
@@ -790,11 +811,11 @@ function Canvas() {
if
(
d
.
visible
&&
d
.
loaded
&&
d
.
active
)
d
.
alpha2
=
1
;
if
(
d
.
visible
&&
d
.
loaded
&&
d
.
active
)
d
.
alpha2
=
1
;
else
if
(
d
.
visible
&&
!
d
.
loaded
&&
d
.
active
)
loadImagesCue
.
push
(
d
);
else
if
(
d
.
visible
&&
!
d
.
loaded
&&
d
.
active
)
loadImagesCue
.
push
(
d
);
else
d
.
alpha2
=
0
;
else
d
.
alpha2
=
0
;
})
})
;
}
else
{
}
else
{
data
.
forEach
(
function
(
d
)
{
data
.
forEach
(
function
(
d
)
{
d
.
alpha2
=
0
;
d
.
alpha2
=
0
;
})
})
;
}
}
}
}
...
@@ -805,16 +826,16 @@ function Canvas() {
...
@@ -805,16 +826,16 @@ function Canvas() {
}
}
// console.log("load", d)
// console.log("load", d)
var
url
=
config
.
loader
.
textures
.
detail
.
url
+
d
.
id
+
'
.jpg
'
var
url
=
config
.
loader
.
textures
.
detail
.
url
+
d
.
id
+
"
.jpg
"
;
var
texture
=
new
PIXI
.
Texture
.
fromImage
(
url
,
true
)
var
texture
=
new
PIXI
.
Texture
.
fromImage
(
url
,
true
)
;
var
sprite
=
new
PIXI
.
Sprite
(
texture
);
var
sprite
=
new
PIXI
.
Sprite
(
texture
);
var
update
=
function
()
{
var
update
=
function
()
{
sleep
=
false
sleep
=
false
;
}
}
;
sprite
.
on
(
'
added
'
,
update
)
sprite
.
on
(
"
added
"
,
update
)
;
texture
.
once
(
'
update
'
,
update
)
texture
.
once
(
"
update
"
,
update
)
;
sprite
.
scale
.
x
=
d
.
scaleFactor
;
sprite
.
scale
.
x
=
d
.
scaleFactor
;
sprite
.
scale
.
y
=
d
.
scaleFactor
;
sprite
.
scale
.
y
=
d
.
scaleFactor
;
...
@@ -828,51 +849,51 @@ function Canvas() {
...
@@ -828,51 +849,51 @@ function Canvas() {
d
.
sprite2
=
sprite
;
d
.
sprite2
=
sprite
;
d
.
alpha2
=
d
.
highlight
;
d
.
alpha2
=
d
.
highlight
;
d
.
loaded
=
true
;
d
.
loaded
=
true
;
sleep
=
false
sleep
=
false
;
}
}
function
loadBigImage
(
d
)
{
function
loadBigImage
(
d
)
{
if
(
!
config
.
loader
.
textures
.
big
)
{
if
(
!
config
.
loader
.
textures
.
big
)
{
loadMiddleImage
(
d
)
loadMiddleImage
(
d
)
;
return
return
;
}
}
state
.
lastZoomed
=
d
.
id
;
state
.
lastZoomed
=
d
.
id
;
var
page
=
d
.
page
?
'
_
'
+
d
.
page
:
''
var
page
=
d
.
page
?
"
_
"
+
d
.
page
:
""
;
var
url
=
config
.
loader
.
textures
.
big
.
url
+
d
.
id
+
page
+
"
.jpg
"
;
var
url
=
config
.
loader
.
textures
.
big
.
url
+
d
.
id
+
page
+
"
.jpg
"
;
var
texture
=
new
PIXI
.
Texture
.
fromImage
(
url
,
true
)
var
texture
=
new
PIXI
.
Texture
.
fromImage
(
url
,
true
)
;
var
sprite
=
new
PIXI
.
Sprite
(
texture
);
var
sprite
=
new
PIXI
.
Sprite
(
texture
);
var
res
=
config
.
loader
.
textures
.
big
.
size
var
res
=
config
.
loader
.
textures
.
big
.
size
;
var
updateSize
=
function
()
{
var
updateSize
=
function
()
{
var
size
=
Math
.
max
(
texture
.
width
,
texture
.
height
)
var
size
=
Math
.
max
(
texture
.
width
,
texture
.
height
)
;
sprite
.
scale
.
x
=
sprite
.
scale
.
y
=
(
imageSize3
/
size
)
*
d
.
scaleFactor
;
sprite
.
scale
.
x
=
sprite
.
scale
.
y
=
(
imageSize3
/
size
)
*
d
.
scaleFactor
;
sleep
=
false
sleep
=
false
;
}
}
;
sprite
.
on
(
'
added
'
,
updateSize
)
sprite
.
on
(
"
added
"
,
updateSize
)
;
texture
.
once
(
'
update
'
,
updateSize
)
texture
.
once
(
"
update
"
,
updateSize
)
;
if
(
d
.
imagenum
)
{
if
(
d
.
imagenum
)
{
sprite
.
on
(
"
mousemove
"
,
function
(
s
)
{
sprite
.
on
(
"
mousemove
"
,
function
(
s
)
{
var
pos
=
s
.
data
.
getLocalPosition
(
s
.
currentTarget
)
var
pos
=
s
.
data
.
getLocalPosition
(
s
.
currentTarget
)
;
s
.
currentTarget
.
cursor
=
pos
.
x
>
0
?
"
e-resize
"
:
"
w-resize
"
s
.
currentTarget
.
cursor
=
pos
.
x
>
0
?
"
e-resize
"
:
"
w-resize
"
;
})
})
;
sprite
.
on
(
"
click
"
,
function
(
s
)
{
sprite
.
on
(
"
click
"
,
function
(
s
)
{
if
(
drag
)
return
if
(
drag
)
return
;
s
.
stopPropagation
()
s
.
stopPropagation
()
;
spriteClick
=
true
spriteClick
=
true
;
var
pos
=
s
.
data
.
getLocalPosition
(
s
.
currentTarget
)
var
pos
=
s
.
data
.
getLocalPosition
(
s
.
currentTarget
)
;
var
dir
=
pos
.
x
>
0
?
1
:
-
1
var
dir
=
pos
.
x
>
0
?
1
:
-
1
;
var
page
=
d
.
page
+
dir
var
page
=
d
.
page
+
dir
;
var
nextPage
=
page
var
nextPage
=
page
;
if
(
page
>
d
.
imagenum
-
1
)
nextPage
=
0
if
(
page
>
d
.
imagenum
-
1
)
nextPage
=
0
;
if
(
page
<
0
)
nextPage
=
d
.
imagenum
-
1
if
(
page
<
0
)
nextPage
=
d
.
imagenum
-
1
;
canvas
.
changePage
(
d
.
id
,
nextPage
)
canvas
.
changePage
(
d
.
id
,
nextPage
)
;
})
})
;
sprite
.
interactive
=
true
;
sprite
.
interactive
=
true
;
}
}
...
@@ -883,14 +904,14 @@ function Canvas() {
...
@@ -883,14 +904,14 @@ function Canvas() {
sprite
.
_data
=
d
;
sprite
.
_data
=
d
;
d
.
big
=
true
;
d
.
big
=
true
;
stage5
.
addChild
(
sprite
);
stage5
.
addChild
(
sprite
);
sleep
=
false
sleep
=
false
;
}
}
function
clearBigImages
()
{
function
clearBigImages
()
{
while
(
stage5
.
children
[
0
])
{
while
(
stage5
.
children
[
0
])
{
stage5
.
children
[
0
].
_data
.
big
=
false
;
stage5
.
children
[
0
].
_data
.
big
=
false
;
stage5
.
removeChild
(
stage5
.
children
[
0
]);
stage5
.
removeChild
(
stage5
.
children
[
0
]);
sleep
=
false
sleep
=
false
;
}
}
}
}
...
@@ -916,7 +937,12 @@ function Canvas() {
...
@@ -916,7 +937,12 @@ function Canvas() {
//console.log(node, x , x1 , best.d);
//console.log(node, x , x1 , best.d);
//return;
//return;
// exclude node if point is farther away than best distance in either axis
// exclude node if point is farther away than best distance in either axis
if
(
x
<
x1
-
best
.
d
||
x
>
x2
+
best
.
d
||
y
<
y1
-
best
.
d
||
y
>
y2
+
best
.
d
)
{
if
(
x
<
x1
-
best
.
d
||
x
>
x2
+
best
.
d
||
y
<
y1
-
best
.
d
||
y
>
y2
+
best
.
d
)
{
return
best
;
return
best
;
}
}
// test point if there is one, potentially updating best
// test point if there is one, potentially updating best
...
@@ -935,17 +961,18 @@ function Canvas() {
...
@@ -935,17 +961,18 @@ function Canvas() {
// and then recurse on most likely kids first, so we quickly find a
// and then recurse on most likely kids first, so we quickly find a
// nearby point and then exclude many larger rectangles later
// nearby point and then exclude many larger rectangles later
var
kids
=
node
.
nodes
;
var
kids
=
node
.
nodes
;
var
rl
=
(
2
*
x
>
x1
+
x2
)
,
var
rl
=
2
*
x
>
x1
+
x2
,
bt
=
(
2
*
y
>
y1
+
y2
)
;
bt
=
2
*
y
>
y1
+
y2
;
if
(
kids
[
bt
*
2
+
rl
])
best
=
nearest
(
x
,
y
,
best
,
kids
[
bt
*
2
+
rl
]);
if
(
kids
[
bt
*
2
+
rl
])
best
=
nearest
(
x
,
y
,
best
,
kids
[
bt
*
2
+
rl
]);
if
(
kids
[
bt
*
2
+
(
1
-
rl
)])
best
=
nearest
(
x
,
y
,
best
,
kids
[
bt
*
2
+
(
1
-
rl
)]);
if
(
kids
[
bt
*
2
+
(
1
-
rl
)])
if
(
kids
[(
1
-
bt
)
*
2
+
rl
])
best
=
nearest
(
x
,
y
,
best
,
kids
[(
1
-
bt
)
*
2
+
rl
]);
best
=
nearest
(
x
,
y
,
best
,
kids
[
bt
*
2
+
(
1
-
rl
)]);
if
(
kids
[(
1
-
bt
)
*
2
+
(
1
-
rl
)])
best
=
nearest
(
x
,
y
,
best
,
kids
[(
1
-
bt
)
*
2
+
(
1
-
rl
)]);
if
(
kids
[(
1
-
bt
)
*
2
+
rl
])
best
=
nearest
(
x
,
y
,
best
,
kids
[(
1
-
bt
)
*
2
+
rl
]);
if
(
kids
[(
1
-
bt
)
*
2
+
(
1
-
rl
)])
best
=
nearest
(
x
,
y
,
best
,
kids
[(
1
-
bt
)
*
2
+
(
1
-
rl
)]);
return
best
;
return
best
;
}
}
return
canvas
;
return
canvas
;
}
}
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment