demo draw lines and click to playback
This commit is contained in:
Ruben van de Ven
parent
ef3fe001dc
commit
c59b198b54
3 changed files with 132 additions and 17 deletions
|
|
@ -1619,7 +1619,7 @@ class AnnotationPlayer extends HTMLElement {
|
|||
styleEl.textContent = `
|
||||
:host{
|
||||
overflow: hidden;
|
||||
--disactive-path: rgba(220,220,220,.7)
|
||||
|
||||
}
|
||||
|
||||
svg{
|
||||
|
|
|
|||
145
canvas.html
145
canvas.html
|
|
@ -44,6 +44,10 @@
|
|||
margin: 0.5rem auto;
|
||||
}
|
||||
|
||||
.anchor{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*Filenames with code blocks: https://stackoverflow.com/a/58199362*/
|
||||
div.sourceCode::before {
|
||||
content: attr(data-filename);
|
||||
|
|
@ -69,6 +73,18 @@
|
|||
top: -1000px;
|
||||
left: -1000px;
|
||||
}
|
||||
|
||||
#collage_window svg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
div[data-custom-style='Body Text'] p{
|
||||
padding: 1em 0;
|
||||
margin: 0;
|
||||
background-color: rgba(255,255,255, 0.8);
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="paper.css" />
|
||||
<script src="assets/wNumb-1.2.0.min.js"></script>
|
||||
|
|
@ -81,23 +97,26 @@
|
|||
[7137, 3869], // left in practice is -5746px;, top: -2988px;:
|
||||
]
|
||||
|
||||
// test with FPR
|
||||
const canvasCenter = [20077 / 2, 10331 / 2]
|
||||
|
||||
let scale = .5;
|
||||
const sheet = new CSSStyleSheet
|
||||
sheet.replaceSync(
|
||||
`
|
||||
:host(){
|
||||
--override-color: gray
|
||||
:host{
|
||||
--override-color: gray;
|
||||
}
|
||||
:host(.active){
|
||||
--override-color: blue;
|
||||
}
|
||||
|
||||
|
||||
:host(.ending){
|
||||
--override-color: blue;
|
||||
--disactive-path: rgba(100,100,100,.7)
|
||||
}`);
|
||||
}
|
||||
div.controls{display:none !important;}`
|
||||
);
|
||||
console.log(sheet, sheet.rules)
|
||||
|
||||
|
||||
function easeInOutQuart(x) {
|
||||
|
|
@ -129,11 +148,18 @@
|
|||
|
||||
const windowEl = document.getElementById('collage_window')
|
||||
const anchorEls = document.getElementsByClassName('anchor')
|
||||
const playerEls = document.getElementsByTagName('annotation-player')
|
||||
|
||||
const paths = [document.getElementById('path1'), document.getElementById('path2'), document.getElementById('path3')]
|
||||
paths.forEach((el) => el.style.strokeDasharray = Math.ceil(el.getTotalLength()) + 'px');
|
||||
|
||||
const lastAnchorEl = anchorEls[anchorEls.length - 1];
|
||||
console.log(lastAnchorEl)
|
||||
|
||||
for(const player of windowEl.children){
|
||||
for (const anchorEl of anchorEls) {
|
||||
anchorEl.addEventListener('click', ev => playerEls[anchorEl.dataset.i].annotator.playPause());
|
||||
}
|
||||
for (const player of playerEls) {
|
||||
player.shadowRoot.adoptedStyleSheets = [sheet];
|
||||
}
|
||||
|
||||
|
|
@ -143,36 +169,63 @@
|
|||
center_y = window.scrollY + window.innerHeight / 2
|
||||
prev = null;
|
||||
next = null;
|
||||
for (let offset of scroll_offsets) {
|
||||
step_idx = null;
|
||||
for (let idx in scroll_offsets) {
|
||||
const offset = scroll_offsets[idx]
|
||||
if (offset[0] > center_y) {
|
||||
next = offset
|
||||
step_idx = idx;
|
||||
break;
|
||||
}
|
||||
prev = offset
|
||||
}
|
||||
|
||||
let source_pos, target_pos, source_scale, target_scale;
|
||||
let source_pos, target_pos, source_scale, target_scale, source_color, target_color, source_x_offset, target_x_offset;
|
||||
|
||||
const x_column_width = window.innerWidth - document.body.getBoundingClientRect().width+200; // for some reason the 200 is neccesary
|
||||
const x_center_map = x_column_width / 2;
|
||||
const x_center_column = document.body.getBoundingClientRect().left + document.body.getBoundingClientRect().width / 2;
|
||||
|
||||
const fit_scale = x_column_width / (canvasCenter[0] * 1.7)
|
||||
|
||||
if (prev === null) {
|
||||
prev = [next[0] - window.innerHeight / 2, null]
|
||||
|
||||
source_scale = .1
|
||||
source_scale = fit_scale
|
||||
target_scale = .45
|
||||
source_pos = canvasCenter
|
||||
target_pos = centerPoints[next[1]]
|
||||
|
||||
source_color = 100;
|
||||
target_color = 220;
|
||||
|
||||
source_x_offset = x_center_map;
|
||||
target_x_offset = x_center_column;
|
||||
|
||||
} else if (next === null) {
|
||||
next = [prev[0] + window.innerHeight / 2, null]
|
||||
|
||||
source_scale = .45
|
||||
target_scale = .1
|
||||
target_scale = fit_scale
|
||||
source_pos = centerPoints[prev[1]]
|
||||
target_pos = canvasCenter
|
||||
|
||||
source_color = 220;
|
||||
target_color = 50;
|
||||
|
||||
source_x_offset = x_center_column;
|
||||
target_x_offset = x_center_map;
|
||||
|
||||
} else {
|
||||
source_pos = centerPoints[prev[1]]
|
||||
target_pos = centerPoints[next[1]]
|
||||
target_scale = .45
|
||||
source_scale = .45
|
||||
|
||||
source_color = target_color = 220;
|
||||
|
||||
source_x_offset = target_x_offset = x_center_column;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -188,9 +241,38 @@
|
|||
|
||||
|
||||
scale = source_scale + t_ease * ds;
|
||||
x = -1 * (source_pos[0] + dx * t_ease) * scale + window.innerWidth / 2;
|
||||
x_offset = (target_x_offset - source_x_offset) * t_ease + source_x_offset
|
||||
x = -1 * (source_pos[0] + dx * t_ease) * scale + x_offset;
|
||||
y = -1 * (source_pos[1] + dy * t_ease) * scale + window.innerHeight / 2;
|
||||
// console.log('x', x, 'y', y, 'scale', scale)
|
||||
|
||||
const color = (target_color - source_color) * t_ease + source_color
|
||||
console.log(sheet)
|
||||
// sheet.rules[0].style.setProperty('--override-color', `rgba(${color},${color},${color},0.7)`);
|
||||
sheet.rules[0].style.setProperty('--disactive-path', `rgba(${color},${color},${color},0.7)`);
|
||||
|
||||
// draw the line
|
||||
|
||||
if (step_idx === null) {
|
||||
// full paths
|
||||
paths.forEach(el => el.style.strokeDashoffset = 0)
|
||||
}
|
||||
else {
|
||||
// no paths
|
||||
paths.forEach((el, idx) => {
|
||||
if (idx >= step_idx ) {
|
||||
el.style.strokeDashoffset = Math.ceil(el.getTotalLength()) + 'px';
|
||||
} else if (idx == step_idx-1 ) {
|
||||
// console.log('anim', el)
|
||||
el.style.strokeDashoffset = Math.ceil(el.getTotalLength() - el.getTotalLength()*t_ease) + 'px';
|
||||
} else {
|
||||
el.style.strokeDashoffset = 0;
|
||||
}
|
||||
});
|
||||
// paths.forEach((el) => stroke)
|
||||
|
||||
}
|
||||
|
||||
// console.log('x', x, 'y', y, 'scale', scale, 'color', color)
|
||||
|
||||
// console.log(x, y);
|
||||
|
||||
|
|
@ -202,11 +284,11 @@
|
|||
const last = Math.max(...Array.from(anchorEls).map((e) => e.getBoundingClientRect().bottom))
|
||||
console.log(last)
|
||||
if (last < 0) {
|
||||
for (const playerEl of windowEl.children) {
|
||||
for (const playerEl of playerEls) {
|
||||
playerEl.classList.add('ending')
|
||||
}
|
||||
} else {
|
||||
for (const playerEl of windowEl.children) {
|
||||
for (const playerEl of playerEls) {
|
||||
playerEl.classList.remove('ending')
|
||||
}
|
||||
}
|
||||
|
|
@ -233,7 +315,7 @@
|
|||
entries.forEach((entry) => {
|
||||
index = entry.target.dataset.i;
|
||||
console.log(entry)
|
||||
if (index >= windowEl.children.length) {
|
||||
if (index >= playerEls.length) {
|
||||
return;
|
||||
}
|
||||
playerEl = windowEl.children[index];
|
||||
|
|
@ -241,6 +323,10 @@
|
|||
playerEl.classList.add('active')
|
||||
} else {
|
||||
playerEl.classList.remove('active')
|
||||
if(typeof playerEl.annotator.paused !== 'undefined' && !playerEl.annotator.paused){
|
||||
console.log('pause', playerEl.annotator, playerEl.annotator.paused)
|
||||
playerEl.annotator.pause()
|
||||
}
|
||||
}
|
||||
})
|
||||
}, options);
|
||||
|
|
@ -348,6 +434,35 @@
|
|||
<annotation-player style="position:absolute;width:2952px; height:5043px;left:0;top:0;"
|
||||
data-url-prefix="assets" stroke="blue" data-crop='whole'
|
||||
data-annotation-url="annotation-BIXG4VTL.json"></annotation-player>
|
||||
|
||||
|
||||
<svg height="10331.54" version="1.1" viewBox="61.650009 -1201.8501 20077.92 10331.539" width="20077.92"
|
||||
id="svg1410" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs id="defs4">
|
||||
<marker style="overflow:visible" id="marker39470" refX="0" refY="0" orient="auto-start-reverse"
|
||||
markerWidth="5.3244081" markerHeight="6.155385" viewBox="0 0 5.3244081 6.1553851"
|
||||
preserveAspectRatio="xMidYMid">
|
||||
<path transform="scale(0.5)"
|
||||
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
|
||||
d="M 5.77,0 -2.88,5 V -5 Z" id="path39468-6" />
|
||||
</marker>
|
||||
</defs>
|
||||
<g id="layer1">
|
||||
<path
|
||||
style="fill:none;stroke:#00f;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:20, 40;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker39470)"
|
||||
d="M 3153.037,4991.1869 C 3627.9651,3806.502 10134,2080.0386 13783.189,4095.2221" id="path1" />
|
||||
<path
|
||||
style="fill:none;stroke:#00f;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:20, 40;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker39470)"
|
||||
d="M 14473.211,4826.0987 C 14487.638,6297.2524 9146.0135,8823.4797 5997.8383,8868.5177"
|
||||
id="path2" />
|
||||
<path
|
||||
style="fill:none;stroke:#00f;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:20, 40;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker39470)"
|
||||
d="M 5562.416,8572.101 C 5561.5237,7310.7009 7556.3295,6911.6966 7557.7371,3111.5328"
|
||||
id="path3" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!--data-poster-url="annotation-F19O9PGE.svg"-->
|
||||
<!--data-poster-url="annotation-XYGE65SB.svg"-->
|
||||
<!--data-poster-url="annotation-NKOUGNWE.svg"-->
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ html {
|
|||
background-color: #fafafa;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto;
|
||||
margin: 0 50px 0 auto;
|
||||
max-width: 36em;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue