From c59b198b5475ccdae123b5d06956ac2e4792c4d9 Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Mon, 18 Dec 2023 15:28:52 +0100 Subject: [PATCH] demo draw lines and click to playback --- assets/annotate.js | 2 +- canvas.html | 145 ++++++++++++++++++++++++++++++++++++++++----- paper.css | 2 +- 3 files changed, 132 insertions(+), 17 deletions(-) diff --git a/assets/annotate.js b/assets/annotate.js index df5573c..2a8b94e 100644 --- a/assets/annotate.js +++ b/assets/annotate.js @@ -1619,7 +1619,7 @@ class AnnotationPlayer extends HTMLElement { styleEl.textContent = ` :host{ overflow: hidden; - --disactive-path: rgba(220,220,220,.7) + } svg{ diff --git a/canvas.html b/canvas.html index b132698..71227ad 100644 --- a/canvas.html +++ b/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); + } @@ -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 @@ + + + + + + + + + + + + + + + diff --git a/paper.css b/paper.css index 0b9ca3d..4c10616 100644 --- a/paper.css +++ b/paper.css @@ -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;